What does forward() do?

ReactJunior~2 min read

1. What `forward` is

forward() is a mechanism for passing events or effects further along the data flow. It connects a source (from) to a target (to): when something happens in from, Effector automatically triggers to with the same payload.

You can think of it as an analogy:

"When this event happens, trigger another one".

2. The simplest example

javascript

import { createEvent, forward } from 'effector'

const loginClicked = createEvent()
const startAuth = createEvent()

forward({
  from: loginClicked,
  to: startAuth,
})

loginClicked()
// => automatically triggers startAuth()

Here loginClicked simply "forwards" the signal into startAuth.

3. Passing data (payload)

If from passes an argument, to receives it too:

javascript

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

forward({
  from: userSelected,
  to: loadUserFx,
})

userSelected({ id: 42 })
// => automatically triggers loadUserFx({ id: 42 })

So the payload is fully preserved.

4. You can connect not only events but also effects

from and to can be:

an event
an effect
a store (via .updates)
an array of several sources

An example with several sources:

javascript

const startLogin = createEvent()
const startRegister = createEvent()
const authFx = createEffect(async (data) => api.auth(data))

forward({
  from: [startLogin, startRegister],
  to: authFx,
})

Now either event will trigger authFx.

5. forward() ≠ sample()

They are sometimes confused, but they are different:

	forward()	sample()
Meaning	just "redirect"	"take a snapshot from source on clock"
Changes data	no	can, via `fn`
Has a filter	no	yes, `filter`
Scenario	connecting events of the same kind	connecting dependencies (for example, on form submit)

If you just need to "pass along" an event → forward. If you need to "sample" data on that event → sample.

6. Used for routing events

An example - merging several events into one:

javascript

const clicked = createEvent()
const pressedEnter = createEvent()
const submitForm = createEvent()

forward({
  from: [clicked, pressedEnter],
  to: submitForm,
})

Now both a click and pressing Enter trigger submitForm.

7. You can route the result of an effect

javascript

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

const userLoaded = createEvent<any>()

forward({
  from: fetchUserFx.doneData,
  to: userLoaded,
})

Now, when fetchUserFx finishes successfully, userLoaded(result) fires.

8. Implementation details

forward() immediately creates a subscription between the streams;
you cannot use circular connections (Effector will catch the error);
data does not change, it just "flies further along";
it is convenient to use for:
- routing signals,
- merging events,
- reusing business logic.

9. Visually

javascript

[from] ---> [to]

userSelected ---> loadUserFx

or, if there are several:

javascript

[clicked] ─┐
           ├──> [submitForm]
[pressedEnter] ┘

Summary

forward() is a simple way to route events, effects, or their results from one place to another. It:

does not transform data,

does not filter,

just "forwards" the call while preserving reactivity.

An example to remember

javascript

forward({
  from: logoutClicked,
  to: clearSessionFx,
})

"When the user clicks Logout, run the session-clearing effect".

Short Answer

Interview ready

Premium

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