State Management

Skill: Set Up State Management

Trigger

When the user needs to manage state for a new feature or refactor existing state.

Steps

Step 1: Analyze State Requirements

• [ ] What data needs to be managed?
• [ ] Is it UI state or server state?
• [ ] How many components need access?
• [ ] How often does it change?
• [ ] Does it need to persist?

Step 2: Choose Approach

Use this decision tree: 1. Single component → useState / useReducer 2. Parent + 1-2 children → Lift state up 3. Many components, UI state → Context / Zustand 4. Server data → TanStack Query 5. Form data → React Hook Form 6. Complex workflows → XState

Step 3: Implement Store/Hook

Based on the chosen approach, create:

• [ ] State types/interfaces
• [ ] Store definition or custom hook
• [ ] Actions/mutations
• [ ] Selectors for derived data

Step 4: Connect Components

• [ ] Add provider (if using Context/Redux)
• [ ] Use hooks in components
• [ ] Implement loading states
• [ ] Implement error handling
• [ ] Handle empty states

Step 5: Optimize Performance

• [ ] Memoize selectors
• [ ] Avoid unnecessary re-renders
• [ ] Keep state granular
• [ ] Use React.memo for pure components

Step 6: Test

• [ ] Test store/hook in isolation
• [ ] Test components with mocked state
• [ ] Test state transitions
• [ ] Test error handling

Completion

State management is implemented, connected, optimized, and tested.