Прозора реактивність
Принцип transparent reactivity (прозора реактивність) - один із ключових ідеологічних принципів бібліотеки Zustand, який пояснює, чому вона здається «магічно» реактивною без зайвого коду.
Просте визначення
Transparent reactivity означає, що компоненти React автоматично оновлюються, коли змінюються ті частини стану, на які вони «підписані» - без додаткового коду, провайдерів чи ручних підписок.
Іншими словами, реактивність «прозора»:
ти просто читаєш дані зі стору в компоненті, а Zustand сам стежить за їх змінами і викликає ререндер, коли потрібно.
Приклад
import { create } from 'zustand'
const useStore = create(() => ({
count: 0,
inc: () => set((s) => ({ count: s.count + 1 })),
}))
function Counter() {
const count = useStore((s) => s.count) // ← просто читаємо count
const inc = useStore((s) => s.inc)
return (
<div>
<p>{count}</p>
<button onClick={inc}>+</button>
</div>
)
}Ти ніде явно не підписуєшся на оновлення, не викликаєш subscribe(), не передаєш контекст -
а React сам перемальовує Counter, коли count змінився.
Це і є transparent reactivity.
Як це працює «під капотом»
Zustand використовує механізм підписок (subscription system), який:
- зберігає поточний стан в одному об'єкті (store);
- дозволяє кожному компоненту викликати
useStore(selector); - підписує компонент на результат селектора;
- при зміні стану порівнює старе і нове значення;
- якщо вони відрізняються - викликає ререндер компонента.
Компонент нічого не знає про механізм підписок - він просто «працює» → реактивність «прозора».
Порівняння з іншими підходами
| Підхід | Реактивність | Прозорість |
|---|---|---|
| Redux (класичний) | через connect() або useSelector() | частково (потрібно обгортати) |
| Context API | через Provider і useContext() | ні (усі діти ререндеряться) |
| MobX | реактивно через проксі-об'єкти | прозора, але потребує observer() |
| Zustand | реактивно через селектори і підписки | повністю прозора (жодних HOC, контексту чи декораторів) |
Чому це важливо
Мінімум коду - просто викликаєш хук.
Без boilerplate - немає провайдерів, mapStateToProps, connect.
Висока продуктивність - компонент оновлюється лише при реальній зміні потрібних даних.
Природна поведінка - store працює як звичайний об'єкт, але з реактивністю «з коробки».
Коротко формулюючи
У Zustand реактивність - це не те, що ти «вмикаєш» чи «визначаєш».
Вона прозора: ти просто читаєш значення, і воно само стає реактивним.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.