=> { const all = Object.values(state.tasks); return state.activeFilter === 'all' ? all : all.filter(t => t.status === state.activeFilter); }, [state.tasks, state.activeFilter]);

// External synchronization: fetch on mount + projectId change useEffect(() => { const controller = new AbortController(); dispatch({ type: 'FETCH_START' });

fetch(`/api/projects/${projectId}/tasks`, { signal: controller.signal })
  .then(res => {
    if (!res.ok) throw new Error('Network response failed');
    return res.json();
  })
  .then((data: TaskPayload[]) => dispatch({ type: 'FETCH_SUCCESS', payload: data }))
  .catch(err => {
    if (err.name !== 'AbortError') {
      dispatch({ type: 'FETCH_ERROR', payload: err.message });
    }
  });

return () => controller.abort();

}, [projectId]);

// Stable callback to prevent child re-renders const handleStatusChange = useCallback((id: string, newStatus: TaskStatus) => { dispatch({ type: 'UPDATE_STATUS', payload: { id, status: newStatus } }); }, []);

return ( <div className="workflow-container"> <header> <select value={state.activeFilter} onChange={e => dispatch({ type: 'SET_FILTER', payload: e.target.value as TaskStatus | 'all' })} > <option value="all">All</option> <option value="pending">Pending</option> <option value="in_progress">In Progress</option> <option value="review">Review</option> <option value="completed">Completed</option> </select> <button onClick={() => setShowDetails(prev => !prev)}> {showDetails ? 'Hide' : 'Show'} Details </button> </header>

  {state.isLoading && <p>Loading tasks...</p>}
  {state.error && <p className="error">{state.error}</p>}

  <ul>
    {filteredTasks.map(task => (
      <li key={task.id}>
        <span>{task.assignee}</span>
        <select
          value={task.status}
          onChange={e => handleStatusChange(task.id, e.target.value as TaskStatus)}
        >
          <option value="pending">Pending</option>
          <option value="in_progress">In Progress</option>
          <option value="review">Review</option>
          <option value="completed">Completed</option>
        </select>
        {showDetails && <small>ID: {task.id}</small>}
      </li>
    ))}
  </ul>
</div>

); }

### Architecture Decisions & Rationale
1. **`useReducer` for task state**: Task status, loading flags, and error messages are tightly coupled. A reducer enforces explicit transitions, prevents partial updates, and isolates business logic from the UI layer.
2. **`useState` for UI toggles**: `showDetails` is independent. It doesn't affect task data or trigger network calls. Using `useState` here avoids unnecessary reducer complexity.
3. **`useMemo` for filtering**: Filtering is a pure computation. Deriving it inline or with `useMemo` prevents the render-cycle trap that occurs when developers push derived values into `useEffect`.
4. **`useEffect` with `AbortController`**: Network requests are external side effects. The effect synchronizes with the API, handles loading/error states via dispatch, and cleans up pending requests on unmount or `projectId` change. This prevents race conditions and memory leaks.
5. **`useCallback` for event handlers**: Wrapping `handleStatusChange` ensures child list items don't re-render unnecessarily when parent state updates. This is a production performance baseline, not an optimization afterthought.

## Pitfall Guide

### 1. The Derived State Trap
**Explanation**: Using `useEffect` to compute values that already exist in props or state. This triggers an extra render cycle: compute → `setState` → re-render → compute again.
**Fix**: Compute inline or use `useMemo`. Only use `useEffect` when synchronizing with external systems.

### 2. The Coordination Tax
**Explanation**: Multiple `useState` calls that must update together. Handlers become fragile, and missing one update causes UI desync.
**Fix**: Migrate to `useReducer`. Group related state into a single object and define explicit action types for every transition.

### 3. The Stale Closure Loop
**Explanation**: Event handlers or effects capturing outdated state/props due to missing dependencies or improper functional updates.
**Fix**: Use functional state updates (`setState(prev => ...)`) when new state depends on previous. For effects, include all external dependencies in the array, or refactor to use refs for mutable values that shouldn't trigger re-renders.

### 4. The Effect Cascade
**Explanation**: An effect updates state, which triggers another effect, creating an infinite loop or unpredictable execution order.
**Fix**: Consolidate logic into a single effect or reducer. If multiple side effects must run, sequence them explicitly or lift shared logic into a custom hook that manages its own lifecycle.

### 5. The Reducer Overkill
**Explanation**: Using `useReducer` for simple, independent values like a single boolean toggle or a string input.
**Fix**: Reserve `useReducer` for state machines with 3+ related variables or explicit transition rules. Simple independent state belongs in `useState`.

### 6. The Missing Cleanup
**Explanation**: Subscriptions, timers, or event listeners attached in `useEffect` without a corresponding cleanup function. Causes memory leaks and duplicate handlers.
**Fix**: Always return a cleanup function from `useEffect`. For fetch requests, use `AbortController`. For intervals, use `clearInterval`. For DOM events, use `removeEventListener`.

### 7. The Dependency Array Illusion
**Explanation**: Assuming an empty dependency array `[]` means "run once". In React 18+ Strict Mode, effects run twice in development to surface cleanup issues. Relying on `[]` for initialization logic breaks in production.
**Fix**: Use `useEffect` for synchronization, not initialization. For one-time setup, use refs with a flag or leverage React 19's `use` hooks for data fetching. Always design effects to be idempotent.

## Production Bundle

### Action Checklist
- [ ] Classify every state variable: independent, coordinated, or derived
- [ ] Replace manual `useState` coordination with `useReducer` when transitions are interdependent
- [ ] Remove all `useEffect` calls that only compute values; move them inline or to `useMemo`
- [ ] Wrap external subscriptions in `useEffect` with explicit cleanup functions
- [ ] Use `AbortController` for all fetch operations inside effects
- [ ] Memoize event handlers passed to child components to prevent unnecessary re-renders
- [ ] Test reducers in isolation before integrating with components
- [ ] Profile with React DevTools to verify render boundaries match your architecture

### Decision Matrix

| Scenario | Recommended Approach | Why | Cost Impact |
|----------|---------------------|-----|-------------|
| Single toggle or input field | `useState` | Minimal overhead, straightforward lifecycle | Low |
| Multi-step form or workflow with validation | `useReducer` | Explicit transitions, testable logic, prevents partial updates | Medium (initial setup) / Low (long-term) |
| Syncing with browser APIs, timers, or network | `useEffect` | Designed for external synchronization, supports cleanup | Medium (requires careful dependency management) |
| Filtering, sorting, or formatting existing data | Inline / `useMemo` | Zero extra renders, deterministic, easy to test | Low |
| Sharing state across deeply nested components | Context + `useReducer` or Zustand/Redux | Avoids prop drilling, centralizes state updates | High (architecture shift) / Low (maintenance) |

### Configuration Template
Copy this structure for any new component requiring state management. It enforces separation of concerns and production-ready patterns.

```typescript
import { useState, useReducer, useEffect, useMemo, useCallback } from 'react';

// 1. Define types
interface ComponentState { /* ... */ }
type ComponentAction = { type: 'ACTION_NAME'; payload?: any };

// 2. Pure reducer
function componentReducer(state: ComponentState, action: ComponentAction): ComponentState {
  // Implement transitions
  return state;
}

// 3. Component skeleton
export function Component({ id }: { id: string }) {
  const [state, dispatch] = useReducer(componentReducer, { /* initial */ });
  const [uiState, setUiState] = useState(false);

  // Derived data
  const derived = useMemo(() => { /* compute */ }, [state]);

  // External sync
  useEffect(() => {
    const controller = new AbortController();
    // fetch/subscribe logic
    return () => controller.abort();
  }, [id]);

  // Stable handlers
  const handleAction = useCallback((payload: any) => {
    dispatch({ type: 'ACTION_NAME', payload });
  }, []);

  return <div>{/* UI */}</div>;
}

Quick Start Guide

1. Audit your component: List every piece of state. Tag each as independent, coordinated, or derived.
2. Group coordinated state: If 2+ variables change together or depend on each other, create a useReducer with explicit action types.
3. Strip computation from effects: Find every useEffect that calls setState with a computed value. Move it inline or to useMemo.
4. Add cleanup boundaries: Ensure every useEffect that touches external systems returns a cleanup function. Use AbortController for network calls.
5. Validate with profiling: Open React DevTools, enable "Highlight updates", and interact with the component. Verify that only necessary parts re-render. If unrelated UI flashes, refactor handler stability or memoization.