Jotai Atom Explorer

Jotai is a primitive, flexible atomic state management library for React. The word 'jotai' means 'state' in Japanese. Unlike Zustand (store-based) or Redux (global reducer), Jotai builds state from small atomic units called atoms. Components subscribe to specific atoms, and only re-render when those atoms change — naturally preventing unnecessary updates.

An atom is the smallest unit of state in Jotai. You create one with atom(initialValue). Any component can read and write it with useAtom(atomName), similar to React's useState. Atoms are stored in a Provider (or default global store) and automatically garbage collected when no components subscribe to them.

A derived atom computes its value from other atoms. Create one by passing a read function to atom(): const derivedAtom = atom(get => get(countAtom) * 2). Derived atoms are read-only by default. For read-write derived atoms, pass both read and write functions. They memoize and only recompute when their dependencies change.

atomWithStorage is a utility from jotai/utils that synchronizes atom state with localStorage, sessionStorage, or AsyncStorage. Import it and use: const themeAtom = atomWithStorage('theme', 'light'). The value persists across page reloads and syncs across tabs. It also handles serialization automatically.

Both use the atomic model. Jotai is simpler: no atom keys required (preventing key conflicts), smaller bundle (~3KB vs ~20KB for Recoil), and better TypeScript support. Recoil has more built-in utilities (selectors, effects, snapshots) but is Facebook-specific and less actively maintained. Jotai is generally preferred for new projects.

Use Jotai when you have many small, independent state pieces with fine-grained subscriptions — like individual UI elements, feature flags per component, or derived computed values. Use Zustand when you have domain state with actions (e.g., a shopping cart, auth store) where related state and logic belong together. They can coexist in the same app.