This is an overview of the atom creators/hooks utilities that can be found under
jotai/utils. Each utility is listed below with a link to their description/API.
atomWithStoragefunction creates an atom with a value persisted in
sessionStoragefor React or
AsyncStoragefor React Native.
atomWithObservablefunction creates an atom from an RxJS (or similar)
observable. Its value will be last value emitted from the stream.
useUpdateAtomand write-only atoms to avoid re-render.
Returns the value of the given atom.
Creates an atom that could be reset to its
Resets a Resettable atom to its initial value.
Special value that is accepted by Resettable atoms created with
atomWithDefaultor writable atom created with atom if it accepts
Use this hook to update an atom value with a reducer function.
This is a function to create an atom with an embedded reducer function to update the value.
This is a function to create an overwritable primitive atom. Its default value can be specified with a read function instead of a static initial value.
This creates a new atom that is connected with URL hash.
This will create a function that takes param and returns an atom.
This function creates a derived atom whose value is a function of the original atom's value, determined by
This hook allows one to interact with atoms imperatively.
freezeAtomtakes an existing atom and returns a new derived atom. The value with the new derived atom will be frozen (i.e. not mutable).
Instead of creating a frozen atom from an existing atom,
freezeAtomCreatortakes an atom creator function and returns a new function.
splitAtomutility is useful for when you want to get an atom for each element in a list.
waitForAllutility is a concurrency helper, which allows us to evaluate multiple async atoms.
The primary use case for
useHydrateAtomsare 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.
loadableAPI will allow you to bypass the inherent suspending happening at the core of asynchronous flows in Jotai. Wrap your atoms with
loadableand you directly get the results of your async atoms as an object with a state to tell you if the Promise has resolved or even failed.