Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Прозора реактивність». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (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 реактивність - це не те, що ти «вмикаєш» чи «визначаєш».  
> Вона **прозора**: ти просто читаєш значення, і воно само стає реактивним.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати365 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.