Jotai Atomic State Management

Quick Guide: Jotai provides atomic, bottom-up state management with automatic dependency tracking. Define atoms at module level (never inside components). Use primitive atoms for values, derived atoms for computed state, write-only atoms for actions, and async atoms with Suspense for loading. Components only re-render when their specific atoms change. The atomFamily utility is deprecated -- use the jotai-family package for new code.

<critical_requirements>

CRITICAL: Before Using Jotai

(You MUST define atoms OUTSIDE components -- creating atoms inside render causes broken state)

(You MUST wrap async atom consumers in Suspense boundaries -- async atoms trigger Suspense by default)

(You MUST use write atoms (action atoms) to encapsulate multi-atom updates and post-async state changes)

(You MUST use jotai-family package instead of deprecated atomFamily from jotai/utils for new code)

</critical_requirements>