How to use it in a non singleton way, ie: as a state for a reusable component ?

[pmndrs]

How to use it in a non singleton way, ie: as a state for a reusable component ?

[dai-shi]

@a-eid Can you create a codesandbox example to show what you would like to do? Even if it's incomplete. Then, we could help based on it.
What you described sounds like something possible with useState.

---

I wanna hold its state in atoms rather than react state to avoid unnecessary re-renders.

OK, now I see your point.

const Input = () => {
const validAtom = useRef(atom(false)).current
const charCountAtom = useRef(atom(0)).current

function handleChange() {
	// ... handle change 
}

return <div>
    <InputIcon validAtom={validAtom} charCountAtom={carCountAtom} />
    <InputLabel validAtom={validAtom} charCountAtom={carCountAtom} />
    <BaseInput validAtom={validAtom} charCountAtom={AtomcarCountAtom} onChange={handleChange}/>
    <inputCountIndicator validAtom={validAtom} charCountAtom={carCountAtom} />
    ... etc.
  </div>
}

Something like this?

There can be various patterns.

Explicit lazy ref initialization:

const validAtom = useRef()
if (!validAtom.current) {
  validAtom.current = atom(false)
}

Create multiple atoms in a ref:

const atoms = useRef()
if (!atoms.current) {
  atoms.current = {
    valid: atom(false),
    charCount: atom(0),
  }
}

Instead of useRef, we could use useState, useMemoOne, or even useAtom.

We could also use atomFamily. It's a variant of singleton, but it would work for this use case.

It would be still worth for a codesandbox example, so that we can discuss more concretely, and have better ideas.

[a-eid]

@italodeandra yes they do, I'm just wondering what would be the best way to create/consume atoms in a non singleton way.

to clarify what I want is:

some stateful reusable components are too big to re-render for each change the happens, I wanna hold it's state in atoms and consume it where needed.

for example

const Input = () => {
const [valid, setValid] = React.useState(false)
const [charCount setCharCount] = React.useState(0)

function handleChange() {
	// ... handle change 
}

return <div>
    <InputIcon valid={valid} charCount={carCount} />
    <InputLabel valid={valid} charCount={carCount} />
    <BaseInput valid={valid} charCount={carCount} onChange={handleChange}/>
    <inputCountIndicator valid={valid} charCount={carCount} />
    ... etc.
  </div>
}

say this component will be needed all over the place

I wanna hold its state in atoms rather than react state to avoid unnecessary re-renders.
what would be the best way to do so ( consuming / creating non singleton state in atoms )

@dai-shi am really interested in your opinion

thanks.

[dai-shi]

@a-eid Do you have any other questions? If we have concrete ideas, we could write something in docs.

#5 is a related issue.

[italodeandra]

I didn't completely get it what you're looking for. But I know atoms can be created on render, perhaps that can help.

[a-eid]

@dai-shi thank you,
if I create an atom from within the component ( on the fly ), how do u think it's best to use it outside / from deep within the component tree ?

[dai-shi]

@a-eid you are welcome,
you can use a context and pass down the atom (not the atom value).

[a-eid]

@dai-shi thank you, you previous comment answered the the query I had in mind.

[lemind]

@dai-shi
I have related question please
How can we make atom singleton without hooks nor familyAtom?

And little one about store

const myStore = createStore()
const countAtom = atom(0)
myStore.set(countAtom, 1)

We can set value like this.
But what I want to use as a key one atom and save value like another atom?
is that possible?

Thank you

[dai-shi]

But what I want to use as a key one atom and save value like another atom?

I'm afraid I don't get the question. What's the imaginary usage?

[lemind]

But what I want to use as a key one atom and save value like another atom?

I'm afraid I don't get the question. What's the imaginary usage?

// one file
const getAtom = (params) => atom({bigAtom: params})
const newAtom = getAtom()
myStore.set(newAtom, newAtom)

// another file
// to get the newAtom value from myStore we need atom key, but we can not get it, cause we get an atom via getAtom function

The overall question that if we create atom inside function and can not export it then it hard to use it as a key for a store.

[dai-shi]

Not sure, but the only workaround is to export a function from the first file?
Not even sure if it's Jotai specific problem.
In the mental model, assume the following:

function atom(init) {
  return { init }
}
function createStore() {
  return new WeakMap()
}

[lemind]

Not sure, but the only workaround is to export a function from the first file? Not even sure if it's Jotai specific problem. In the mental model, assume the following:

function atom(init) {
  return { init }
}
function createStore() {
  return new WeakMap()
}

Even if we export getAtom fn, with new call it will be another atom, am I understand correct?

I need something like - we create atom dynamically then put it to a Store via may be a string key myStore.set('meAtom', newAtom)
then we get it in another file by the key.

So I just need something like singleton atom. As you said before I can use useState,etc, but may be I can solve my issue out of react cmp. And I missed some workaround.

I hope it is clearer. Thank you

[dai-shi]

Something like this?

// one file
export const myStore = createStore()
export const newAtomAtom = atom(null)
const getAtom = (params) => atom({bigAtom: params})
const newAtom = getAtom()
myStore.set(newAtomAtom, newAtom)

// another file
const newAtom = myStore.get(newAtomAtom)
const value = myStore.get(newAtom)

[lemind]

Something like this?

// one file
export const myStore = createStore()
export const newAtomAtom = atom(null)
const getAtom = (params) => atom({bigAtom: params})
const newAtom = getAtom()
myStore.set(newAtomAtom, newAtom)

// another file
const newAtom = myStore.get(newAtomAtom)
const value = myStore.get(newAtom)

There thing is with TS you should support null option.
Let me work around your solution.
Thank you