Suggest an edit

Improve this article

Refine the answer for “What does `createGate()` do”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## What `createGate()` is

> `createGate()` is a tool from the `effector-react` package
> that ties **a React component's lifecycle (mount/unmount)**
> to **Effector's reactive model**.

More simply:

> A "Gate" is the **entry point** for a component's data and state into the Effector world.
> It lets Effector know **when the component is mounted, unmounted, and with which props**.

---

## 1. Basic usage example

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

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

// somewhere in the component:
function UserPage({ userId }: { userId: number }) {
  // "open the gate" - pass data from React into Effector
  UserGate.useGate({ userId })

return <div>User profile {userId}</div>
}
```

When the component **mounts** -> the Gate "opens"
When it **unmounts** -> the Gate "closes"

---

## 2. What a Gate does under the hood

Each Gate creates **several events and store objects**:

| Element | Type | What it does |
|---|---|---|
| `Gate.open` | `Event<Props>` | called when the component mounts |
| `Gate.close` | `Event<void>` | called when it unmounts |
| `Gate.status` | `Store<boolean>` | true = the component is mounted |
| `Gate.state` | `Store<Props>` | holds the current props passed to `useGate()` |

So a Gate is a reactive representation of a React component's lifecycle.

---

## 3. Example in a real scenario

```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()
})

// when the component opened (mounted) -> trigger loading
sample({
  clock: UserGate.open,
  source: UserGate.state.map(({ id }) => id),
  target: fetchUserFx,
})
```

Now the user loads automatically when `UserPage` mounts,
and on unmount you can cancel operations or clear the state.

---

## 4. Gate for SSR

A Gate is a perfect fit for SSR (Server-Side Rendering):
it lets you describe **what needs to be loaded on the server**
if this component must be rendered ahead of time.

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

On the server you can "open the gate" manually:

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

This makes SSR predictable and reactive - no chaos with `useEffect()`.

---

## 5. Gate and nested components

If component A opens GateA,
and inside it there is component B with GateB,
Effector tracks them **independently**:
each gate runs in its own "lifetime scope".

You can, for example, only trigger data loading
if **both Gates are open** (through `$GateA.status` and `$GateB.status`).

---

## 6. Gate combined with `sample` and `guard`

A common pattern:

```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,
})
```

Now:

- loading starts when the Product component mounts,
- but only if `$isOnline === true`.

---

## 7. How `useGate()` works internally

When you call:

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

Effector does the following under the hood:

1. `Gate.open({ userId: 123 })`
2. Sets `$status = true`, `$state = { userId: 123 }`
3. When the component unmounts:
  - calls `Gate.close()`
  - `$status = false`

So this is a **hook wrapper** that links React and Effector.

---

## 8. Key benefits of `Gate`

| Benefit | Description |
|---|---|
| **Lifecycle** | Lets Effector know when a component exists |
| **Connection to props** | Automatically passes props into a store |
| **Data loading** | You can trigger effects on mount |
| **Cleanup** | You can reset state when the Gate closes |
| **SSR-ready** | Works the same way in the browser and on the server |

---

## 9. Visually

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

A Gate is a "reactive door" between React and the Effector graph.

---

## 10. SUMMARY

> `createGate()` is the "gate" between React and Effector.
> It lets you:
>
> - track a component's **mounting/unmounting**,
> - bring its **props into the reactive model**,
> - **automatically trigger effects** on open,
> - **reset** data on close,
> - and **manage SSR loading** without `useEffect`.

---

### A memory formula

> `createGate()` = "a reactive useEffect + useState, but inside the Effector graph".

Markdown · drag & drop images · ⌘B / ⌘I shortcuts744 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.