Transparent reactivity
The "transparent reactivity" principle is one of the key ideological principles of the Zustand library, and it explains why it feels "magically" reactive with no extra code.
A simple definition
Transparent reactivity means that React components update automatically when the parts of state they are "subscribed" to change, with no extra code, providers, or manual subscriptions.
In other words, reactivity is "transparent": you just read data from the store inside the component, and Zustand itself tracks its changes and triggers a re-render when needed.
Example
import { create } from 'zustand'
const useStore = create(() => ({
count: 0,
inc: () => set((s) => ({ count: s.count + 1 })),
}))
function Counter() {
const count = useStore((s) => s.count) // ← just reading count
const inc = useStore((s) => s.inc)
return (
<div>
<p>{count}</p>
<button onClick={inc}>+</button>
</div>
)
}You never explicitly subscribe to updates anywhere, never call subscribe(), never pass a context,
yet React re-renders Counter on its own when count changes.
That is transparent reactivity.
How it works "under the hood"
Zustand uses a subscription system that:
- stores the current state in a single object (the store);
- lets each component call
useStore(selector); - subscribes the component to the selector's result;
- compares the old and new value when the state changes;
- triggers a re-render of the component if they differ.
The component knows nothing about the subscription mechanism - it just "works" -> reactivity is "transparent".
Comparison with other approaches
| Approach | Reactivity | Transparency |
|---|---|---|
| Redux (classic) | via connect() or useSelector() | partial (you need to wrap things) |
| Context API | via Provider and useContext() | none (all children re-render) |
| MobX | reactive via proxy objects | transparent, but requires observer() |
| Zustand | reactive via selectors and subscriptions | fully transparent (no HOCs, context, or decorators) |
Why this matters
Minimal code - you just call a hook. No boilerplate - no providers, mapStateToProps, connect. High performance - a component updates only when the data it actually needs changes. Natural behavior - the store works like a plain object, but with reactivity built in.
Summing it up
In Zustand, reactivity is not something you "turn on" or "declare". It is transparent: you just read a value, and it becomes reactive on its own.
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.