Jotai Atomic State

Manage React state with Jotai's atomic model. Designs primitive and derived atoms, async atoms with Suspense, atom families, and storage-persisted atoms to eliminate unnecessary re-renders and context boilerplate.

This skill helps you build bottom-up state with Jotai. It defines primitive atoms, composes read/write derived atoms, handles async atoms with Suspense and error boundaries, scopes state with Provider and atom families, persists atoms to storage, and integrates jotai/utils and TanStack Query for a minimal, render-optimized state graph.

When to use

Use when you want fine-grained, atom-based React state that avoids Context re-render pyramids — derived selectors, async data atoms, per-component scoping, or persisted client state.

Examples

Derived filter state

Compose atoms for a filtered view

Model a product list with Jotai using a source atom, a filter atom, and a derived atom that returns the filtered results without extra re-renders

Async data atom

Load data with a Suspense atom

Create an async Jotai atom that fetches the current user and renders it inside a Suspense boundary with an error fallback