HomeReact
Chapter 7
07 — useState & useReducer
Deep dive into React's two primary state management hooks. useState for simple state, useReducer for complex state logic.
useState Deep Patterns
| Pattern | Example |
|---|---|
| Lazy initialization | useState(() => expensiveCalc()) — runs only once |
| Updater function | setState(prev => prev + 1) — avoids stale closures |
| Object state | setState(prev => ({ ...prev, key: value })) |
| Array state | setState(prev => [...prev, newItem]) |
| Reset state | setState(initialValue) or use a key prop |
useReducer
const [state, dispatch] = useReducer(reducer, initialState);| Concept | Description |
|---|---|
| State | The current state value |
| Action | An object describing what happened { type: 'INCREMENT' } |
| Dispatch | Function to send an action |
| Reducer | Pure function: (state, action) => newState |
useState vs useReducer
| useState | useReducer | |
|---|---|---|
| Best for | Independent values, simple updates | Related values, complex transitions |
| Update logic | Inline in handler | Centralized in reducer |
| Debugging | Harder (scattered) | Easier (one function) |
| Testing | Needs component | Reducer is a pure function |
File
state-hooks.tsx— lazy init, updater patterns, useReducer with actions, todo app, complex form, when to use which