Primitive and flexible state management for React


This is an overview over atom creators/hooks utilities that can 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 a 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 embeded 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 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 (= not mutable).

  16. freezeAtomCreator

    Instead of create 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.