State Management Skill | Agent Skills

Agent Skills: State Management

Apply best practices for managing URL, server, and client state in Next.js applications. Use when choosing between URL params, SWR/TanStack Query, Zustand, or Context for state, or when fixing hydration mismatches from localStorage. (triggers: **/hooks/*.ts, **/store.ts, **/components/*.tsx, useState, useContext, zustand, redux)

UncategorizedID: hoangnguyen0403/agent-skills-standard/nextjs-state-management

State Management

Priority: P2 (MEDIUM)

Decision Guide

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

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

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.

Agent Skills: State Management

Install this agent skill to your local

Skill Files

State Management

Priority: P2 (MEDIUM)

Decision Guide

URL-Driven State

Server State (SWR / TanStack Query)

Client State (Zustand)

Hydration Safety

Library Patterns

Anti-Patterns