Suggest an edit

Improve this article

Refine the answer for “Why is Effector called a "reactive state manager"?”. 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)

## 1. What reactivity is

**Reactivity** is an approach where the system automatically reacts to data changes.
If one value depends on another, it **updates itself** when the source changes.

Example in plain JS (not reactive):

```javascript
let a = 2
let b = a * 2
a = 3
console.log(b) // still 4, needs to be recalculated manually
```

Example of a reactive approach:

```javascript
$a = createStore(2)
$b = $a.map(a => a * 2)

$a.setState(3)
console.log($b.getState()) // 6 - updated automatically
```

In a reactive system, dependent values are **"subscribed"** to sources and **react** without manual recalculation.

---

## 2. Effector works as a data flow

Effector builds a **graph of reactive connections**:

- `event` → triggers a change;
- `store` → holds data and reacts to events;
- `effect` → performs an asynchronous operation;
- `sample` → links these nodes into a flow.

Every change triggers a "reaction" along the chain of dependencies.
The system guarantees that computations run **deterministically and synchronously, in order** - meaning the result is always the same for the same set of input data.

---

## 3. Unlike regular state managers

| Approach | How it works |
|---|---|
| **Redux / Zustand** | You call `setState()` or `dispatch()` and manually update dependencies. |
| **Effector** | You define "how data is connected", not "when to change it" - the system reacts on its own. |

Effector has no imperative calls like "change X first, then Y".
You just describe **how Y depends on X**, and the library maintains those dependencies itself.

---

## 4. An example of reactivity in practice

```javascript
import { createStore, createEvent, sample } from 'effector'

const nameChanged = createEvent<string>()
const $name = createStore('Tim').on(nameChanged, (_, name) => name)
const $greeting = $name.map(name => `Hello, ${name}!`)

$name.watch(console.log)      // reacts on every change
$greeting.watch(console.log)  // also updates automatically

nameChanged('Alex')
// In the console:
// Alex
// Hello, Alex!
```

No manual calls, everything updated "along the chain" → **reactive**.

---

## 5. Why this matters

- **Fewer bugs** - the system tracks dependencies itself.
- **Less coupling** between modules - business logic is separated from the UI.
- **Easy to scale** - you can build complex data graphs without manually controlling updates.
- **SSR and multi-layer subscriptions are possible** without state collisions.

---

## 6. The essence in one phrase

> Effector is not just a "state manager", but a **reactive state management system**,
> where data forms a **dependency graph** that automatically reacts to events.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.