Key Takeaways

  1. State Placement Matters: Local (useState), Lifted (Prop Drilling), Global (Context/Redux), Server (React Query). Choose the right tool.
  2. Server State ≠ Client State: Use React Query (TanStack Query) for async data. Don’t put API responses in Redux unless absolutely necessary.
  3. Context is for Dependency Injection: It’s great for low-frequency updates (Auth, Theme). For high-frequency updates, use Zustand or Redux to avoid performance issues.
  4. Zustand for Simplicity: It offers a minimal API without the boilerplate of Redux, making it perfect for most modern apps.
  5. Performance Optimization: Split Contexts (State vs Dispatch) and use memo to prevent unnecessary re-renders.

[!NOTE] This module explores the core principles of Module Review: State Management, deriving solutions from first principles and hardware constraints to build world-class, production-ready expertise.

1. Interactive Flashcards

Test your knowledge by flipping the cards.

What is "Prop Drilling"?

The process of passing data through multiple layers of components that don't need it, just to reach a deep child component.

When should you use React Query?

For any asynchronous server state. It handles caching, background updates, loading states, and error handling automatically.

What is the main downside of Context API for complex state?

Performance. Updating a Context value re-renders ALL consuming components, regardless of whether they use the specific data that changed.

Zustand vs Redux: Which has less boilerplate?

Zustand. It requires no provider wrapper, no separate action types, and uses a simple hook-based API.

2. Cheat Sheet

Feature Context API Zustand Redux React Query
Best For Theme, Auth, Locale Client Global State Complex Enterprise Apps Server State (API)
Boilerplate Low Very Low High Medium
Performance Poor (without memo) Excellent Excellent Excellent
DevTools React DevTools Redux DevTools Redux DevTools Query DevTools
Learning Curve Low Low High Medium
Data Persistence Manual Middleware Middleware Cache

Quick Code Snippets

Zustand Store

const useStore = create((set) => ({
  bears: 0,
  increase: () => set((state) => ({ bears: state.bears + 1 })),
}))

React Query Fetch

const { data } = useQuery({
  queryKey: ['todo'],
  queryFn: fetchTodo
})

Context Provider

const ThemeContext = createContext('light');
<ThemeContext.Provider value="dark">{children}</ThemeContext.Provider>

React Glossary