What does `createGate()` do

ReactMiddle~2 min read

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:

Gate.open({ userId: 123 })
Sets $status = true, $state = { userId: 123 }
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".

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.