npmIntermediate

zustand

🐻 Bear necessities for state management in React

reactstate-managementglobal-statehookslightweightstatemanagermanagementreduxstore

The Problem

Redux solves state management but brings enormous complexity: actions, reducers, selectors, middleware, and a steep learning curve for what is often a shared variable. Context API re-renders the entire subtree on every update. Zustand was built to provide global state with the simplicity of useState and the power of Redux.

Mental Model

A Zustand store is a custom hook. You define state and actions together in one object, and any component calls useStore(state => state.count) to subscribe to exactly the slice it needs. Only components that subscribed to changed state re-render. No providers, no reducers, no boilerplate.

60-second start

Install zustand

npm install zustand
import { } from 'zustand';

Use it when

Use Zustand for global UI state that multiple components need to read and write: auth status, theme preferences, shopping cart, modal state, or any data too complex for prop drilling but not complex enough to justify Redux.

Skip it when

Zustand is not designed for server state — use React Query for that. For very large applications with complex state machines or time-travel debugging requirements, Redux Toolkit's tooling is more mature.

Alternatives

jotaiAtomic state model — each atom is independent, avoiding the single-store pattern; better for derived state

valtioProxy-based state that feels like mutating plain objects — very natural if you dislike the selector pattern

redux-toolkitMore opinionated but better DevTools, time-travel debugging, and team conventions for large apps

Ready to explore the full API?

See every class, function, and relationship in an interactive graph.