Lesson 22 / 25

Redux Toolkit vs Zustand vs Context

Trade-offs, not winners.

What each is good at

Redux Toolkit offers a single store with explicit actions, strong conventions, excellent DevTools, middleware and RTK Query for server data; it suits large apps and teams that value predictability and traceability, at the cost of more structure. Zustand is small and flexible: stores are hooks, no Provider, minimal boilerplate, and multiple independent stores are natural; conventions are up to you. React Context is built in and ideal for rarely changing values, but every consumer re-renders when the value changes, so it is not a high-frequency state store. Other options such as Jotai (atoms), MobX (observables) or XState (state machines) fit specific mental models.

The right tool, measured

Pick a state approach by team and problem, then measure re-renders instead of guessing.

Four ideas: trade-offs, performance debugging, migrating legacy Redux, a final checklist.
Figure 8.1 — Redux Toolkit, Zustand and Context compared, then profiled.

A comparison sketch

General tendencies; verify for your app.

                    Redux Toolkit            Zustand                 Context
setup               store + slices + Provider create() hook            built into React
boilerplate         moderate                 minimal                 minimal
re-render control   selectors (useSelector)  selectors (+useShallow) all consumers re-render
devtools            first-class              via devtools middleware React DevTools only
server data         RTK Query included       pair with TanStack Query pair with a query lib
best for            large apps, many devs    small to large, flexible rarely changing values

Mixing is normal

Many apps combine a server-cache library for API data, a small Zustand or Redux store for global client state, and local useState for everything else. Pick per kind of state, not one tool for all.

Quick check: Why is React Context a poor fit for frequently changing global state?

  • Context values are lost on every render
  • Context cannot hold objects
  • Context only works in class components
  • Every consumer re-renders when the context value changes
Answer

Every consumer re-renders when the context value changes — Context has no built-in selector-based subscriptions.