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

Great work thank you!!

I was thinking how could I use atoms in a non singleton way, for example if I’m making a reusable Component Dropdown & I wanna hold onto some state for each instance of the Component in atoms like for a dropdown it would be options, how do I do that ?

[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.

[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.