jotai-expert_skill

Overview

This skill is an expert guide for implementing Jotai-based state management in React applications. It helps design atoms, implement derived and async atoms, use atomFamily, optimize performance, add persistence, and apply TypeScript typings and tests. Use it to get practical, pattern-driven advice and refactoring suggestions that follow Jotai best practices.

How this skill works

I inspect your component state needs, existing atoms, and usage patterns to recommend atom granularity, encapsulation, and actions. For async flows I propose suspense-friendly atoms or error handling, and for dynamic data I design atomFamily with removal rules. I also analyze performance hotspots and suggest selectAtom, splitAtom, or memoization strategies, plus persistence with atomWithStorage and testing helpers.

When to use it

• When designing or refactoring atom structure for a feature module
• When implementing derived, async, or write-only (action) atoms
• When managing collections or per-id state via atomFamily
• When optimizing renders and subscriptions with selectAtom/splitAtom
• When adding client-side persistence (local/session storage)
• When adding TypeScript types or writing unit/integration tests

Best practices

• Keep atoms small and focused; export derived/read-only atoms while hiding base atoms
• Put complex updates in write-only action atoms to centralize logic
• Use Suspense and Error Boundary around async atoms for predictable loading/error states
• Prevent atomFamily memory leaks with remove() or setShouldRemove() rules
• Prefer type inference, and add explicit generics only when necessary
• Use selectAtom/splitAtom and stable memoization to minimize re-renders

Example use cases

• Refactor a global user object into small atoms (profile, settings, tokens) with encapsulated setters
• Implement a userData async atom that fetches data by userId and is wrapped in Suspense
• Create a todo atomFamily for per-item state with automatic cleanup after inactivity
• Optimize a large form by splitting fields into independent atoms and using selectAtom for read-only views
• Persist theme and session atoms using atomWithStorage and createJSONStorage for sessionStorage
• Write tests by hydrating atoms with useHydrateAtoms and asserting UI changes with Testing Library