# State Management

> Use when: choose and structure client state so data stays consistent and predictable.

- Skill: `kimtth/state-management` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kimtth/state-management`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kimtth/state-management/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: kimtth (https://skillmd.com/u/kimtth)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/kimtth/state-management

---


Goal: state that has one source of truth and predictable updates.

Use for:
- deciding where state should live
- separating server cache from local UI state
- fixing duplicated, out-of-sync, or tangled state

Workflow:
1. Classify state: server data, URL, local UI, or global app.
2. Keep each piece in one place; derive the rest.
3. Manage server data with a caching/query layer, not hand-rolled.
4. Keep global state minimal; colocate local state.
5. Make updates explicit and traceable.
6. Verify consistency across components after changes.

Categories:
- server cache: fetched data with its own freshness rules
- URL state: shareable, navigable parameters
- local UI state: ephemeral, component-scoped
- global state: truly app-wide, kept small

Rules:
- one source of truth per piece of state
- derive values; do not store what you can compute
- do not put server data in global state by hand
- lift state only as far as it is actually shared