Zustand vs Context Comparison
Render Counter Demo
This demo compares Zustand (with and without Immer) with React Context. All implement the same todo list functionality. Watch the render counters to see how Zustand optimizes re-renders through selective subscriptions, while Context re-renders all consumers when any state changes. The Zustand + Immer version shows how Immer simplifies state updates with mutable-style code.
Zustand (Optimized)
✅Selective subscriptions - Components only re-render when their subscribed state changes
✅SSR-friendly with Context - Each component tree gets its own store instance
Zustand Todo List
Renders:0Items Component Renders: 0
Learn Zustand#0
Compare with Context#0
Build awesome apps#0
Zustand + Immer (Mutable style)
✅Same benefits as Zustand - Plus simpler state updates
✅Mutable-style updates - Write code like mutating, but it's immutable under the hood
💡 Try editing a todo by clicking the edit icon
Zustand + Immer Todo List
Renders:0Items Component Renders: 0
Learn Zustand + Immer#0
Use immutable updates#0
Simplify state management#0
React Context (Standard)
⚠️All consumers re-render - Any state change triggers all context consumers
⚠️Provider required - Must wrap components in provider
Context Todo List
Renders:0Items Component Renders: 0
Learn Zustand#0
Compare with Context#0
Build awesome apps#0
Observations
- Zustand: The input component only re-renders when you type. The todo items list only re-renders when todos change. Each item tracks its own render count independently.
- Context: Every consumer (input, list, all items) re-renders whenever any state changes, because context value changes trigger all consumers even if they don't use the changed data.
- Try adding a todo in both lists and compare the render counters - Zustand will show fewer re-renders.