SSR
useHydrateAtoms
Ref: https://github.com/pmndrs/jotai/issues/340
Usage
import { atom, useAtom } from 'jotai'import { useHydrateAtoms } from 'jotai/utils'const countAtom = atom(0)const CounterPage = ({ countFromServer }) => {useHydrateAtoms([[countAtom, countFromServer]])const [count] = useAtom(countAtom)// count would be the value of `countFromServer`, not 0.}
The primary use case for useHydrateAtoms
are SSR apps like Next.js, where an initial value is e.g. fetched on the server, which can be passed to a component by props.
// Definitionfunction useHydrateAtoms(values: Iterable<readonly [Atom<unknown>, unknown]>,options?: { store?: Store },): void
The hook takes an iterable of tuples containing [atom, value]
as an argument and optional options.
// Usage with an array, specifying a storeuseHydrateAtoms([[countAtom, 42],[frameworkAtom, 'Next.js'],],{ store: myStore },)// Or with a mapuseHydrateAtoms(new Map([[count, 42]]))
Atoms can only be hydrated once per store. Therefore, if the initial value used is changed during rerenders, it won't update the atom value. If there is a unique need to re-hydrate a previously hydrated atom, pass the optional dangerouslyForceHydrate as true and note that it may behave wrongly in concurrent rendering.
useHydrateAtoms([[countAtom, 42],[frameworkAtom, 'Next.js'],],{dangerouslyForceHydrate: true,},)
If there's a need to hydrate in multiple stores, use multiple useHydrateAtoms
hooks to achieve that.
useHydrateAtoms([[countAtom, 42],[frameworkAtom, 'Next.js'],])useHydrateAtoms([[countAtom, 17],[frameworkAtom, 'Gatsby'],],{ store: myStore },)
If you are using TypeScript with target ES5
, you might need as const
cast on the array to preserve the tuple type.
useHydrateAtoms([[countAtom, 42],[frameworkAtom, 'Next.js'],] as const)
Demo
There's more examples in the Next.js section.