Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Підписка на поле в Zustand». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

Zustand-хуки називають **"селективними" (selective hooks)**, тому що вони дозволяють компоненту **підписуватися не на весь store, а тільки на конкретні частини стану**, які йому справді потрібні.

Це - одна з ключових причин, чому Zustand вважається **дуже продуктивним і мінімалістичним** state-менеджером.

---

## Що означає "селективний доступ"

У звичайних глобальних станах (наприклад, через Context API або Redux Provider) компонент підписується на **весь стан**, навіть якщо використовує тільки одне поле.
У результаті - будь-яка зміна *будь-де в store* викликає **зайві ререндери**.

Zustand вирішує це за допомогою **селекторів**

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

Тут компонент:

- підписується **тільки** на `state.count`;
- буде **перерендерений тільки тоді**, коли значення `count` зміниться;
- ігнорує всі інші зміни в store.

---

## Приклад - різниця між "неселективним" і "селективним" підходом

### Поганий (неселективний)

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

Компонент перемалюється, навіть якщо зміниться `user`, хоча йому важливий тільки `count`.

---

### Хороший (селективний)

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

Тепер компонент реагуватиме **тільки на зміни count**.

---

## Під капотом

Коли ти викликаєш хук `useStore(selector)`:

1. Zustand викликає `selector(state)` і зберігає результат.
2. Коли стан змінюється, Zustand порівнює **нове значення, повернуте селектором**, зі старим.
3. Якщо воно **не змінилося**, компонент **не ререндериться**.

Завдяки цьому механізм Zustand залишається:

- **максимально швидким** (ререндер тільки при реальній потребі);
- **простим у використанні** (жодних мемоізацій вручну);
- **типобезпечним** при роботі з TypeScript.

---

## Розширені можливості

Zustand також дозволяє використовувати **глибокі селектори** з поверхневим порівнянням (`shallow`) для запобігання хибним ререндерам:

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

const { count, increase } = useCounterStore(
  (state) => ({ count: state.count, increase: state.increase }),
  shallow // порівняння за значенням, а не за посиланням
)
```

Тепер компонент не буде перерендерюватися, якщо `count` і `increase` не змінилися.

---

## Підсумок

| Концепція | Опис |
|---|---|
| **Селектор** | Функція `(state) => частина стану`, що визначає, що компонент слухає |
| **Селективність** | Компонент отримує тільки потрібні дані і реагує тільки на їх зміну |
| **Перевага** | Немає зайвих ререндерів, висока продуктивність |
| **shallow** | Поверхневе порівняння для складних об'єктів |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати347 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.