Transparent reactivity

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

Принцип "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), який:

зберігає поточний стан в одному об'єкті (store);
дозволяє кожному компоненту викликати useStore(selector);
підписує компонент на результат селектора;
при зміні стану порівнює старе і нове значення;
якщо вони відрізняються, викликає ререндер компонента.

Компонент не знає нічого про механізм підписок - він просто "працює" -> реактивність "прозора".

Порівняння з іншими підходами

Підхід	Реактивність	Прозорість
Redux (класичний)	через `connect()` або `useSelector()`	частково (потрібно обгортати)
Context API	через `Provider` і `useContext()`	немає (усі діти перерендерюються)
MobX	реактивно через проксі-об'єкти	прозора, але потребує `observer()`
Zustand	реактивно через селектори і підписки	повністю прозора (жодних HOC, контексту чи декораторів)

Мінімум коду - просто викликаєш хук. Без boilerplate - немає провайдерів, mapStateToProps, connect. Висока продуктивність - компонент оновлюється лише при реальній зміні потрібних даних. Природна поведінка - store працює як звичайний об'єкт, але з реактивністю "з коробки".

Коротко формулюючи

У Zustand реактивність - не те, що ти "вмикаєш" чи "визначаєш". Вона прозора: ти просто читаєш значення, і воно саме стає реактивним.

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

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

Premium

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

Transparent reactivity

#Просте визначення

#Приклад

#Як це працює "під капотом"

#Порівняння з іншими підходами

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

#Коротко формулюючи