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 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

```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) // ← 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:

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 whenever the state changes;
5. 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.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.