Підписка на поле в Zustand
Zustand-хуки називають "селективними" (selective hooks), тому що вони дозволяють компоненту підписуватися не на весь store, а тільки на конкретні частини стану, які йому справді потрібні.
Це - одна з ключових причин, чому Zustand вважається дуже продуктивним і мінімалістичним state-менеджером.
Що означає "селективний доступ"
У звичайних глобальних станах (наприклад, через Context API або Redux Provider) компонент підписується на весь стан, навіть якщо використовує тільки одне поле. У результаті - будь-яка зміна будь-де в store викликає зайві ререндери.
Zustand вирішує це за допомогою селекторів
const count = useCounterStore((state) => state.count)Тут компонент:
- підписується тільки на
state.count; - буде перерендерений тільки тоді, коли значення
countзміниться; - ігнорує всі інші зміни в store.
Приклад - різниця між "неселективним" і "селективним" підходом
Поганий (неселективний)
const { count, user } = useStore()Компонент перемалюється, навіть якщо зміниться user, хоча йому важливий тільки count.
Хороший (селективний)
const count = useStore((state) => state.count)Тепер компонент реагуватиме тільки на зміни count.
Під капотом
Коли ти викликаєш хук useStore(selector):
- Zustand викликає
selector(state)і зберігає результат. - Коли стан змінюється, Zustand порівнює нове значення, повернуте селектором, зі старим.
- Якщо воно не змінилося, компонент не ререндериться.
Завдяки цьому механізм Zustand залишається:
- максимально швидким (ререндер тільки при реальній потребі);
- простим у використанні (жодних мемоізацій вручну);
- типобезпечним при роботі з TypeScript.
Розширені можливості
Zustand також дозволяє використовувати глибокі селектори з поверхневим порівнянням (shallow) для запобігання хибним ререндерам:
import { shallow } from 'zustand/shallow'
const { count, increase } = useCounterStore(
(state) => ({ count: state.count, increase: state.increase }),
shallow // порівняння за значенням, а не за посиланням
)Тепер компонент не буде перерендерюватися, якщо count і increase не змінилися.
Підсумок
| Концепція | Опис |
|---|---|
| Селектор | Функція (state) => частина стану, що визначає, що компонент слухає |
| Селективність | Компонент отримує тільки потрібні дані і реагує тільки на їх зміну |
| Перевага | Немає зайвих ререндерів, висока продуктивність |
| shallow | Поверхневе порівняння для складних об'єктів |
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.