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

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

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

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

Контент

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

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

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

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

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

Хуки Zustand називають **селективними (selective hooks)**, тому що вони дозволяють **витягувати зі store тільки потрібні фрагменти стану**, а не весь об'єкт цілком.
Тобто компонент *"підписується"* **тільки на ту частину стану, яку він реально використовує**.

---

## Суть "селективності"

Коли ти викликаєш Zustand-хук:

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

ти передаєш **селектор** - функцію, яка *вибирає потрібну частину стану* (в даному випадку `count`).
Zustand "розуміє", що твій компонент залежить тільки від `state.count`,
і **буде викликати ререндер тільки при зміні цього поля**, а не при будь-якій зміні store.

---

### Приклад

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

#### Без селектора (не селективно)

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

Компонент буде ререндеритися **при будь-якій зміні store** (наприклад, якщо зміниться `text`).

#### З селектором (селективно)

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

Компонент буде ререндеритися **тільки при зміні** `count`.
Якщо `text` зміниться - компонент не зачепить.

---

## Чому це важливо

### Підвищує продуктивність

- Компоненти не перемальовуються даремно.
- Це особливо критично при великій кількості даних і частих апдейтах.

### Покращує ізоляцію

- Кожен компонент "стежить" тільки за тим, що йому потрібно.
- Менше залежностей і побічних ефектів.

---

## Використання `shallow` для оптимізації

Якщо тобі потрібно підписатися одразу на кілька значень, можна використати **shallow-порівняння**:

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

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

`shallow` запобігає зайвим ререндерам, якщо об'єкт `{ count, text }` не змінився по факту (значення залишилися тими самими).

---

## Підсумок

| Термін | Що означає |
|---|---|
| **Селектор (selector)** | Функція, що вибирає потрібну частину стану зі store |
| **Селективний хук** | Хук, який підписаний тільки на частину стану |
| **Перевага** | Компоненти ререндеряться тільки при зміні вибраних даних |
| **Інструменти оптимізації** | `shallow`, мемоізація селекторів, деструктуризація |

---

### Проста формула для запам'ятовування

> "Селективний Zustand-хук" = "Вибери рівно те, що тобі потрібно - і React перемалює тільки це".

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

Для рев’юера

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

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