Can an atom be initialised on the first render?

[Nazzanuk]

I think I have a use case not sure if it's covered. I'm trying to replace a useState with useAtom but I can't provide an initial state with the atom except after the hook is initialised through useEffect. The initial state is not available when the atom is created but only when the hook/component first runs.

with useState

const useHook = ({ initialCount = 2 }) => {
  const [count, setCount] = useState(initialCount);

  return { count }; // returns 2 from first render
};

with useAtom

const myCountAtom = atom(0); // initial value should not be important

const useAtomHook = ({ initialCount = 2 }) => {
  const [count, setCount] = useAtom(myCountAtom);

  useEffect(() => {
    setCount(initialCount);
  }, []);

  return { count }; // returns 0 on first render, then 2 after useEffect runs
};

ideally

const myCountAtom = atom(0); // initial value is not important

const useAtomHook = ({ initialCount = 2 }) => {
  const [count, setCount] = useAtom(myCountAtom, initialCount); //overwrites the atom value on first render

  return { count }; // returns 2 on first render
};

Is there a util function I'm missing?

[aulneau]

You could do this:

const myCountAtom = atomFamily(initialValue =>  atom(initialValue));

const useAtomHook = ({ initialCount = 2 }) => {
  const [count, setCount] = useAtom(myCountAtom(initialCount))

  return { count }; // returns 2 on first render
};

however, the atom will need to be referenced by the original "initialValue", eg if you wanted to use it elsewhere, you'd have to pass 2 (in this example) to the atomFamily.

[aulneau]

I wonder if @dai-shi has a better alternative?

[Nazzanuk]

Thanks! I simplified the initial value just for example purposes so that probably wouldn't work as it's more likely to be a complex object.

I think there is surely a cleaner way, but I came up with the following:

const myCountAtom = atom(undefined); // must initially be undefined

const useInitAtom = (atom, initialValue) => {
  const [value, setValue] = useAtom(atom);

  useEffect(() => {
    setValue(initialValue);
  }, []);

  return useMemo(() => [value ?? initialValue, setValue], [value]);
};

const useAtomHook = ({ initialCount = 2 }) => {
  const [count, setCount] = useInitAtom(myCountAtom, initialCount);

  return { count }; // returns 2 on first render
};

Which is fine when using the hook, but this approach still has the drawback of not updating the actual atom until after the first render.

[dai-shi]

Well, this is a good question. atoms are usually defined outside component. They do not even depend on react.

If you need to initialize an atom in react, like using props, there are several patterns depending on your requirements.

Create an atom in render

const Component = ({ initialFoo }) => {
  const atomRef = useRef()
  if (!atomRef.current) {
    atomRef.current = atom(initialFoo)
  }
  const fooAtom = atomRef.current
  const [foo, setFoo] = useAtom(fooAtom)
  // ...and now you have to deal with fooAtom. if you want to use is somewhere else,
  // a) pass it as props
  // b) pass it as context
  // c) store it in another atom (called atom-in-atom pattern)

The atomFamily use case is a variant of this.

Set initial atom value on useEffect

const fooAtom = atom(null)

const Component = ({ initialFoo }) => {
  const [fooInAtom, setFoo] = useAtom(fooAtom)
  const foo = fooInAtom ?? initialFoo
  useEffect(() => {
    setFoo(initialFoo)
  }, []) // it's possible/recommended to make this `[initialFoo]`.
  ...
}

This is what you are doing and it's totally valid.

Use Provider initialValues

Recently I noticed in #562 discussion, that Provider can also be used to bridge react world and atom world instead of useEffect.

And, this will solve the first render problem.

const fooAtom = atom(null)

const ParentComponent = ({ foo }) => (
  <Provider initialValues={[[fooAtom, foo]]}>
    <ChildComponent />
  </Provider>
)

const ChildComponent = () => {
  const [foo, setFoo] = useAtom(fooAtom)
  // foo is already initialized.
}

This should work.

---

I'd encourage someone to write this in docs / recipes / initialize-atom-on-render or something.