Чому Zustand-хуки називаються "селективними"?

ReactJunior~1 хв читання

Хуки 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 перемалює тільки це".

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.