Jotai

Overview

Use this skill to make Jotai code feel atomic, composable, and React-friendly. Prefer small state boundaries, derived atoms, write-only action atoms, stable atom references, and narrow subscriptions over store-shaped objects and broad component rerenders.

Workflow

1. Inspect the target code before changing it. Identify existing state ownership, update paths, render hot spots, async behavior, and test coverage.
2. Model state as atoms. Split values when they change independently, derive computed values with read-only atoms, and move commands into write-only atoms.
3. Use the narrowest React hook. Prefer useAtomValue for reads and useSetAtom for writes; use useAtom only when the component genuinely needs both.
4. Keep atom configs stable. Define atoms at module scope when possible; if created during render, memoize them with useMemo, useRef, or useState.
5. Reach for utilities only when they match the shape of the problem. Prefer plain derived atoms first; use splitAtom, focusAtom, atomWithStorage, atomWithReset, unwrap, or related helpers when they remove real complexity.
6. Verify behavior from the user-facing surface when possible. Add focused atom-level tests only for logic that is hard to exercise through components.

Reference Routing

Read only the files that match the task: