Suggest an edit

Improve this article

Refine the answer for “Why are Zustand hooks called "selective"?”. 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)

Zustand hooks are called **selective hooks** because they let you **pull only the needed fragments of state** out of the store, rather than the whole object.
In other words, a component *"subscribes"* **only to the part of the state it actually uses**.

---

## The essence of "selectiveness"

When you call a Zustand hook:

```javascript
const count = useCounterStore((state) => state.count)
```

you pass a **selector**, a function that *picks the needed part of the state* (in this case `count`).
Zustand "understands" that your component depends only on `state.count`,
and it **will trigger a re-render only when that field changes**, not on any change to the store.

---

### Example

```javascript
const useStore = create(() => ({
  count: 0,
  text: 'Hello',
}))
```

#### Without a selector (not selective)

```javascript
const { count } = useStore()
```

The component will re-render **on any change to the store** (for example, if `text` changes).

#### With a selector (selective)

```javascript
const count = useStore((state) => state.count)
```

The component will re-render **only when** `count` changes.
If `text` changes, the component is untouched.

---

## Why this matters

### It improves performance

- Components don't re-render for no reason.
- This is especially critical with large amounts of data and frequent updates.

### It improves isolation

- Each component "watches" only what it needs.
- Fewer dependencies and side effects.

---

## Using `shallow` for optimization

If you need to subscribe to several values at once, you can use **shallow comparison**:

```javascript
import { shallow } from 'zustand/shallow'

const { count, text } = useStore(
  (state) => ({ count: state.count, text: state.text }),
  shallow
)
```

`shallow` prevents unnecessary re-renders if the `{ count, text }` object hasn't actually changed (the values stayed the same).

---

## Summary

| Term | What it means |
|---|---|
| **Selector** | A function that picks the needed part of the state from the store |
| **Selective hook** | A hook subscribed only to part of the state |
| **Benefit** | Components re-render only when the selected data changes |
| **Optimization tools** | `shallow`, memoized selectors, destructuring |

---

### A simple formula to remember

> "A selective Zustand hook" = "Pick exactly what you need, and React will re-render only that".

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.