Primitive and flexible state management for React


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.


  1. atomWithStorage

    The atomWithStorage function creates an atom with a value persisted in localStorage or sessionStorage for React or AsyncStorage for React Native.

  2. atomWithObservable

    The atomWithObservable function creates an atom from an RxJS (or similar) subject or observable. Its value will be last value emitted from the stream.

  3. useUpdateAtom

    Use useUpdateAtom and write-only atoms to avoid re-render.

  4. useAtomValue

    Returns the value of the given atom.

  5. atomWithReset

    Creates an atom that could be reset to its initialValue with useResetAtom hook.

  6. useResetAtom

    Resets a Resettable atom to its initial value.

  7. RESET

    Special value that is accepted by Resettable atoms created with atomWithReset, atomWithDefault or writable atom created with atom if it accepts RESET symbol.

  8. useReducerAtom

    Use this hook to update an atom value with a reducer function.

  9. atomWithReducer

    This is a function to create an atom with an embedded reducer function to update the value.

  10. atomWithDefault

    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.

  11. atomWithHash

    This creates a new atom that is connected with URL hash.

  12. atomFamily

    This will create a function that takes param and returns an atom.

  13. selectAtom

    This function creates a derived atom whose value is a function of the original atom's value, determined by selector.

  14. useAtomCallback

    This hook allows one to interact with atoms imperatively.

  15. freezeAtom

    The freezeAtom takes an existing atom and returns a new derived atom. The value with the new derived atom will be frozen (i.e. not mutable).

  16. freezeAtomCreator

    Instead of creating a frozen atom from an existing atom, freezeAtomCreator takes an atom creator function and returns a new function.

  17. splitAtom

    The splitAtom utility is useful for when you want to get an atom for each element in a list.

  18. waitForAll

    The waitForAll utility is a concurrency helper, which allows us to evaluate multiple async atoms.

  19. useHydrateAtoms

    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.

  20. loadable

    The loadable API will allow you to bypass the inherent suspending happening at the core of asynchronous flows in Jotai. Wrap your atoms with loadable and 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.

  21. abortableAtom

    The abortableAtom utility is to define a derived atom with abortability.