State Management

Priority: P2 (MEDIUM)

Decision Guide

1. Shareable/persistent? Use URL state (useSearchParams + useRouter).
2. Server data? Use SWR or TanStack Query. Never sync into useState.
3. Complex client UI? Use Zustand (in 'use client' only) or Jotai.
4. Simple local? Use useState. Colocate as close to consumer as possible.

URL-Driven State

See implementation examples

Server State (SWR / TanStack Query)

See implementation examples

Client State (Zustand)

See implementation examples

Hydration Safety

Wrap localStorage reads in useEffect or a mounted flag to avoid hydration mismatches. Manage optimistic updates with useOptimistic in Next.js 15+.

Library Patterns

• references/redux.md
• references/zustand.md
• references/url-state.md

Anti-Patterns

• No global store for simple state: Use useState or URL params; avoid Zustand for basic UI.
• No large objects in state: Decompose into granular primitives to prevent extra re-renders.
• No useEffect for data fetching: Use SWR or TanStack Query for server state.
• No server state in client stores: Fetch in RSCs; client stores are for UI-only state.