Jotai Atomic State

Manage React state with Jotai atoms — primitive, composable units that beat Context + useReducer for derived state, async data, and per-component subscriptions.

This skill generates Jotai atoms, derived atoms, async atoms with Suspense, atomFamily for dynamic collections, and integrations with TanStack Query, Valtio, and Zustand. It produces idiomatic patterns for form state, optimistic updates, persistence, and devtools.

When to use

Use when global state needs fine-grained subscriptions, when migrating off Redux/Recoil, or when you want first-class async/Suspense without prop drilling.

Examples

Atom family for dynamic items

Manage per-item state without prop drilling

Use atomFamily to manage the editing state of each row in a data table, with selectors for any-row-dirty status

Async atom with Suspense

Fetch data inside an atom and read it with useAtom

Create an async atom that fetches user profile data and renders it under a Suspense boundary with refresh on user-id change