Suggest an edit

Improve this article

Refine the answer for “Transparent reactivity”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

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

```javascript
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:

1. stores the current state in a single object (the store);
2. lets each component call `useStore(selector)`;
3. subscribes the component to the *selector's result*;
4. compares the old and new value when the state changes;
5. 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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts408 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.