State Management 🧠

Next.js encourages keeping state close to where it’s needed—server for data, client for interaction.

Client State 🧩

• Context: great for small shared state (theme, session). Beware over-rendering.
• Zustand: simple store with hooks; ideal for dashboards.
• Redux Toolkit: predictable state + devtools for large teams.
• React Query / SWR: handle server state (fetching, caching, revalidation) with minimal boilerplate.

Normalization & Caching

• Normalize lists by ID so updates propagate instantly.
• Use optimistic updates for snappy UX.

Server State 🍽️

• Server components are the default source of truth—fetch data there and stream to clients.
• Use cache tags to keep data consistent after mutations (revalidateTag('projects')).
• Avoid duplicate fetches across layouts: shared layout fetch = automatically available to nested children (React caches per request).

Choosing the Right Tool 🧭

Analogy: think of state like luggage—carry-on (component state) for immediate items, overhead bins (context/store) for shared gear, and cargo hold (server components) for heavy data.