Stop Using React Context for State Management. Use Zustand Instead.

Stop Using React Context for State Managemen — Illustration (DALL·E OpenAI)

React Context was never designed to be full-fledged state management solution.

It was introduced to solve a very specific problem: avoiding prop-drilling for values that are shared across a component tree. Things like theme, locale, or configuration fall perfectly into this category.

Somewhere along the way, Context started being used as a replacement for proper state management. Reducers, actions, selectors and entire application stores began living inside Providers — not because Context was good at it, but because it was available.

What happened (the “Context-replaces-Redux” wave)

The vibe was at that time was simple:

• Redux was “too complex”
• boilerplate was blade
• Context was built into React
• therefore, Context could replace Redux

And for a while, it felt true.

React introduced hooks useReducer existed. Context made global state feel accessible without extra dependencies.

Redux wasn’t being replaced because Context was better at state management. It was replaced by some companies because Redux felt heavy — and Context felt free.

The problem is that this wasn’t an architectural improvement — it was convenient shortcut.

Context didn’t suddenly gain fine-grained subscriptions, efficient updates. The fundamental behavior stayed the same: when the Provider value changes, consumers re-render.

Why Context based stores don’t scale

Context-based state management usually starts with good intentions. A single Provider, a clean API, maybe a reducer — it all feels manageable.

Every update is a broadcast

Context has no concept of fine-grained subscriptions.

When the value passed to a Provider changes, every consumer re-renders, even if it only uses a tiny slice of that value.

A consumer is any component that calls useContext(SomeContext)

Meaning that every component inside the Provider tree that reads the context via useContext.

Why Zustand scales where Context doesn’t

Zustand approaches state management from a fundamentally different angle. Instead of pushing state through the React tree, Zustand keeps the state outside of React, and lets component subscribe to exactly what they need.

Under the hood, Zustand works like an observer system: components subscribe to specific slices of state and are only notified when those slices changes.

import { create } from "zustand";

export const usePopupStore = create((set) => ({
  isOpen: false,
  toggle: () => set((s) => ({ isOpen: !s.isOpen })),
}));

const isOpen = usePopupStore((s) => s.isOpen);

<button onClick={usePopupStore((s) => s.toggle)}>
  Toggle
</button>

{isOpen && <SomePopupComponent />}