Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Transparent reactivity». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Transparent reactivity** означає, що компоненти React автоматично оновлюються, коли змінюються ті частини стану, на які вони "підписані", без додаткового коду, провайдерів чи ручних підписок - це один з ключових ідеологічних принципів бібліотеки Zustand. **Ключове:** компонент не знає нічого про механізм підписок - він просто читає значення зі стора, а Zustand сам стежить за змінами і викликає ререндер, коли потрібно.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняПринцип **"transparent reactivity"** (прозора реактивність) - один із ключових ідеологічних принципів бібліотеки **Zustand**, який пояснює, *чому вона здається "магічно" реактивною без зайвого коду*. --- ## Просте визначення > **Transparent reactivity** означає, що компоненти React автоматично оновлюються, коли змінюються ті частини стану, на які вони "підписані" - без додаткового коду, провайдерів чи ручних підписок. Іншими словами, **реактивність "прозора"**: ти просто читаєш дані зі стора в компоненті, а Zustand **сам** стежить за їхніми змінами і викликає ререндер, коли потрібно. --- ## Приклад ```javascript 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)**, який: 1. зберігає поточний стан в одному об'єкті (store); 2. дозволяє кожному компоненту викликати `useStore(selector)`; 3. підписує компонент на *результат селектора*; 4. при зміні стану порівнює старе і нове значення; 5. якщо вони відрізняються, викликає ререндер компонента. > Компонент не знає нічого про механізм підписок - він просто "працює" -> реактивність "прозора". --- ## Порівняння з іншими підходами | Підхід | Реактивність | Прозорість | |---|---|---| | **Redux (класичний)** | через `connect()` або `useSelector()` | частково (потрібно обгортати) | | **Context API** | через `Provider` і `useContext()` | немає (усі діти перерендерюються) | | **MobX** | реактивно через проксі-об'єкти | прозора, але потребує `observer()` | | **Zustand** | реактивно через селектори і підписки | повністю прозора (жодних HOC, контексту чи декораторів) | --- ## Чому це важливо Мінімум коду - просто викликаєш хук. Без boilerplate - немає провайдерів, mapStateToProps, connect. Висока продуктивність - компонент оновлюється лише при реальній зміні потрібних даних. Природна поведінка - store працює як звичайний об'єкт, але з реактивністю "з коробки". --- ## Коротко формулюючи > У Zustand реактивність - не те, що ти "вмикаєш" чи "визначаєш". > Вона **прозора**: ти просто читаєш значення, і воно саме стає реактивним.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.