# Frontend State Strategy

> Standardized guidelines and patterns for Frontend State Strategy.

- Skill: `valec3/frontend-state-strategy` (Agent Skill)
- Install (CLI): `npx skillmds@latest add valec3/frontend-state-strategy`
- Raw SKILL.md: https://api.skillmd.com/api/skills/valec3/frontend-state-strategy/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: valec3 (https://skillmd.com/u/valec3)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/valec3/frontend-state-strategy

---


# Frontend State Strategy

## When to use this skill
- Choosing state management solution
- Architecting state in applications
- Refactoring state management

## Workflow
- [ ] Identify state types (local, global, server)
- [ ] Choose appropriate tool for each type
- [ ] Avoid prop drilling
- [ ] Colocate state with usage
- [ ] Keep state minimal

## Instructions

### State Types
1. **Local State**: useState, useReducer
2. **Global State**: Context, Zustand, Redux
3. **Server State**: React Query, SWR
4. **URL State**: useSearchParams, router

### Decision Tree
```
Is it server data? → React Query
Is it global UI state? → Zustand/Context
Is it local to component? → useState
Is it derived? → useMemo
```

### Example
```typescript
// Local
const [count, setCount] = useState(0);

// Global
const theme = useThemeStore(state => state.theme);

// Server
const { data: user } = useQuery('user', fetchUser);

// URL
const [searchParams] = useSearchParams();
```

## Resources
- Prefer local state
- Server state separate from client state
- Use Context sparingly