Transparent reactivity
The transparent reactivity principle is one of the key ideological principles behind the Zustand library, explaining why it seems "magically" reactive without extra code.
Simple definition
Transparent reactivity means that React components automatically update when the parts of the state they are "subscribed" to change - without extra code, providers, or manual subscriptions.
In other words, reactivity is "transparent":
you simply read data from the store in 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) // ← simply read count
const inc = useStore((s) => s.inc)
return (
<div>
<p>{count}</p>
<button onClick={inc}>+</button>
</div>
)
}You never explicitly subscribe to updates, never call subscribe(), never pass a context -
React re-renders Counter on its own when count changes.
This is exactly what transparent reactivity is.
How this works "under the hood"
Zustand uses a subscription system, which:
- 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 whenever the state changes;
- triggers a component re-render 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 (needs wrapping) |
| Context API | via Provider and useContext() | no (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 - just call the hook.
No boilerplate - no providers, mapStateToProps, connect.
High performance - the component updates only when the relevant data actually changes.
Natural behavior - the store works like a regular object, but with reactivity "out of the box".
In short
In Zustand, reactivity is not something you "turn on" or "define".
It is transparent: you simply 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.