# State Management

> Manage client and server state with Zustand stores and React Query patterns.

- Skill: `redpanda-data/state-management` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add redpanda-data/state-management`
- Raw SKILL.md: https://api.skillmd.com/api/skills/redpanda-data/state-management/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: redpanda-data (https://skillmd.com/u/redpanda-data)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/redpanda-data/state-management

---


# State Management

Choose the right state solution for each use case.

## Activation Conditions

- Managing global state
- Persisting state across navigation
- Cross-component data sharing
- Questions about Zustand vs React Query

## Quick Reference

| Action | Rule |
|--------|------|
| Read from store | `use-zustand-selectors.md` |
| Persist state | `use-zustand-persist.md` |
| Fetch server data | `use-react-query-for-server.md` |

## Decision Tree

```
Is it server data (API response)?
├── Yes → React Query / Connect Query
│         (caching, refetching, invalidation)
└── No → Is it URL state?
    ├── Yes → React Router
    │         (search params, path params)
    └── No → Is it form state?
        ├── Yes → React Hook Form
        │         (validation, submission)
        └── No → Is it shared across components?
            ├── Yes → Zustand
            │         (global, persisted)
            └── No → useState / useReducer
                      (local component state)
```

## Rules

See `rules/` directory for detailed guidance.