state-management
Installation
SKILL.md
state-management Skill
Goal
This skill guides the architecture of frontend state, avoiding "prop drilling" and "spaghetti state."
Steps
1. Types of State
| Type | Definition | Solution |
|---|---|---|
| Server State | Data from API (Users, Posts). | React Query / SWR / TanStack Query. Do not use Redux for this. |
| UI State | Modals open, Sidebar toggle, Form inputs. | Local useState or Context API or Zustand. |
| Global State | User session, Theme, Shopping Cart. | Redux Toolkit / Zustand / Context. |
| URL State | Filters, Pagination, Search Query. | URL Query Params. (The URL is the source of truth). |
2. Selection Guide
- Simple App:
useState+ Context. - Medium App (Dashboard): Zustand (UI) + TanStack Query (Server).
- Complex App (Editor, Enterprise): Redux Toolkit (if strict structure needed) or XState (state machines).