Jotai Patterns

Quick Guide: Jotai builds state bottom-up out of atoms, each tracking its own dependencies, so a component re-renders only for the atoms it read. Atoms are defined at module level; defining one inside a component makes a new atom on every render and the state never survives. Async atoms suspend by default, so their consumers need a Suspense boundary — loadable() and unwrap() are the ways out of that. atomFamily from jotai/utils is deprecated in favour of the jotai-family package.

Detailed Resources:

• examples/core.md — primitive, derived, write-only and read-write atoms
• examples/async.md — async atoms, Suspense, loadable, unwrap, atom families
• examples/persistence.md — atomWithStorage, selectAtom, splitAtom
• examples/testing.md — stores, providers, reset and test isolation
• reference.md — utility lookup and anti-pattern code

Which path applies

• The value is available synchronously — primitive and derived atoms, no boundary needed; follow examples/core.md.
• The value arrives from a promise — the atom suspends, so the consumer needs a Suspense boundary or a wrapper that turns suspension into a value; follow examples/async.md.
• The value has to outlive the tab — storage-backed atoms, with a first-render caveat; follow examples/persistence.md.