react-core-state
Installation
SKILL.md
react-core-state
Quick Reference
State Tool Selection
| Scenario | Tool | Why |
|---|---|---|
| Single primitive or simple object | useState |
Minimal boilerplate, direct updates |
| Complex object with multiple sub-values | useReducer |
Centralized transitions, predictable logic |
| State needed by distant descendants | Context + useState/useReducer |
Avoids prop drilling |
| High-frequency updates read by many components | External store (Zustand/Jotai) | Bypasses Context re-render cascade |
| Server data (fetched, cached, synced) | TanStack Query / SWR | Handles caching, revalidation, deduplication |
| Optimistic UI during async mutation | useOptimistic (React 19) |
Instant feedback, automatic rollback |
| Form submission state | useActionState (React 19) |
Tracks pending state, works with Server Actions |
| Subscribing to non-React store | useSyncExternalStore |
Tear-free reads, SSR-safe |
State Placement Decision
Related skills