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

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

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

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

Контент

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

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

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

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

Відповідь (UA)

## Що таке `createGate()`

> `createGate()` - це спеціальний інструмент із пакета `effector-react`,
> який зв'язує **життєвий цикл React-компонента (mount/unmount)**
> із **реактивною моделлю Effector**.

Простіше кажучи:

> "Gate" (ворота) - це **точка входу** даних і стану компонента у світ Effector.
> Він дозволяє Effector знати, **коли компонент змонтований, розмонтований і з якими props**.

---

## 1. Приклад базового використання

```javascript
import { createGate } from 'effector-react'

const UserGate = createGate<{ userId: number }>()

// десь у компоненті:
function UserPage({ userId }: { userId: number }) {
  // "відкриваємо ворота" - передаємо дані з React в Effector
  UserGate.useGate({ userId })

return <div>Профіль користувача {userId}</div>
}
```

Коли компонент **монтується** -> Gate "відкривається"
Коли **розмонтовується** -> Gate "закривається"

---

## 2. Що робить Gate під капотом

Кожен Gate створює **декілька подій та store-об'єктів**:

| Елемент | Тип | Що робить |
|---|---|---|
| `Gate.open` | `Event<Props>` | викликається при монтуванні компонента |
| `Gate.close` | `Event<void>` | викликається при розмонтуванні |
| `Gate.status` | `Store<boolean>` | true = компонент змонтований |
| `Gate.state` | `Store<Props>` | зберігає поточні props, передані в `useGate()` |

Таким чином, Gate - це реактивне представлення життєвого циклу React-компонента.

---

## 3. Приклад використання в реальному сценарії

```javascript
import { createEffect, sample } from 'effector'
import { createGate } from 'effector-react'

const UserGate = createGate<{ id: number }>()

const fetchUserFx = createEffect(async (id: number) => {
  const res = await fetch(`/api/users/${id}`)
  return res.json()
})

// коли компонент відкрився (змонтувався) -> запускаємо завантаження
sample({
  clock: UserGate.open,
  source: UserGate.state.map(({ id }) => id),
  target: fetchUserFx,
})
```

Тепер при монтуванні `UserPage` автоматично завантажиться користувач,
а при розмонтуванні можна скасувати операції або очистити стан.

---

## 4. Gate для SSR

Gate ідеально підходить для SSR (Server-Side Rendering):
він дозволяє описати, **що потрібно завантажити на сервері**,
якщо цей компонент повинен бути відрендерений заздалегідь.

```javascript
const PageGate = createGate()
sample({
  clock: PageGate.open,
  target: loadPageDataFx,
})
```

На сервері можна "відкрити ворота" вручну:

```javascript
await allSettled(PageGate.open, { scope, params: { slug: 'home' } })
```

Це робить SSR передбачуваним і реактивним - жодного хаосу з `useEffect()`.

---

## 5. Gate і вкладені компоненти

Якщо компонент A відкриває GateA,
а всередині є компонент B з GateB -
Effector відстежує їх **незалежно**:
кожен gate працює у своїй "області життя".

Можна, наприклад, запускати завантаження даних,
тільки якщо **обидва Gate відкриті** (через `$GateA.status` і `$GateB.status`).

---

## 6. Gate у поєднанні з `sample` і `guard`

Частий патерн:

```javascript
import { createEvent, sample, guard } from 'effector'
import { createGate } from 'effector-react'

const ProductGate = createGate<{ id: string }>()
const loadProductFx = createEffect(api.getProduct)
const $isOnline = createStore(true)

guard({
  clock: ProductGate.open,
  filter: $isOnline,
  source: ProductGate.state.map(({ id }) => id),
  target: loadProductFx,
})
```

Тепер:

- при монтуванні Product-компонента запускається завантаження,
- але тільки якщо `$isOnline === true`.

---

## 7. Як `useGate()` працює всередині

Коли ти викликаєш:

```javascript
UserGate.useGate({ userId: 123 })
```

Effector робить під капотом:

1. `Gate.open({ userId: 123 })`
2. Виставляє `$status = true`, `$state = { userId: 123 }`
3. Коли компонент розмонтовується:
  - викликає `Gate.close()`
  - `$status = false`

Таким чином, це **обгортка-hook** для зв'язування React і Effector.

---

## 8. Ключові переваги `Gate`

| Перевага | Опис |
|---|---|
| **Життєвий цикл** | Дозволяє Effector знати, коли компонент існує |
| **Зв'язок із props** | Автоматично передає пропси у store |
| **Data Loading** | Можна запускати ефекти при монтуванні |
| **Очищення** | Можна скидати стан при закритті Gate |
| **SSR-ready** | Працює однаково в браузері і на сервері |

---

## 9. Візуально

```javascript
React Component <-> Gate <-> Effector Graph
        | open/close
        | props -> state
```

Gate - це "реактивні двері" між React і графом Effector.

---

## 10. ПІДСУМОК

> `createGate()` - це "ворота" між React і Effector.
> Він дозволяє:
>
> - відстежувати **монтування/розмонтування** компонентів,
> - отримувати їхні **props у реактивну модель**,
> - **автоматично запускати ефекти** при відкритті,
> - **скидати** дані при закритті,
> - і **керувати SSR-завантаженням** без `useEffect`.

---

### Формула запам'ятовування

> `createGate()` = "реактивний useEffect + useState, але в графі Effector".

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

Для рев’юера

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

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