Suggest an edit

Improve this article

Refine the answer for “What is Effector?”. 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)

**Effector** is a modern state management library for JavaScript and React applications. It lets you describe an application's business logic through **reactive data and events**, while providing **high performance, predictability, and scalability**.

---

### Core Effector concepts

1. **Store**
  - An analog of `state`, but reactive.
  - Holds data and updates only through events or effects.

```javascript
  import { createStore } from 'effector'
  const $counter = createStore(0)
  ```
2. **Event**
  - Describes a state change - something that "happens" in the system.
  - Can be triggered from the UI, an API, or other code.

```javascript
  import { createEvent } from 'effector'
  const increment = createEvent()
  ```
3. **Effect**
  - Used for asynchronous operations (requests, timers, and so on).
  - Automatically manages the execution state (`pending`, `done`, `fail`).

```javascript
  import { createEffect } from 'effector'
  const fetchUserFx = createEffect(async (id: number) => {
    const res = await fetch(`/api/users/${id}`)
    return res.json()
  })
  ```
4. **Sample**
  - A mechanism for linking events and stores: when one event happens, you can "sample" the current value of another store.

```javascript
  import { sample } from 'effector'
  sample({
    clock: increment,
    source: $counter,
    fn: count => count + 1,
    target: $counter,
  })
  ```
5. **Domain**
  - A container for grouping logic (stores, events, effects) by area.
  - Convenient to use in large projects.

```javascript
  import { createDomain } from 'effector'
  const userDomain = createDomain()
  ```

---

### Advantages of Effector

- **High performance** (no unnecessary re-renders).
- **Type safety** - excellent TypeScript integration.
- **Determinism** - the result is always predictable.
- **Minimal side effects** and strict reactivity.
- **SSR compatibility** (Effector can be used on the server).
- **Flexibility** - it does not impose an architecture (you can adopt it partially).

---

### Example usage with React

```javascript
import { createEvent, createStore } from 'effector'
import { useUnit } from 'effector-react'

const increment = createEvent()
const decrement = createEvent()
const $counter = createStore(0)
  .on(increment, count => count + 1)
  .on(decrement, count => count - 1)

function Counter() {
  const [count, inc, dec] = useUnit([$counter, increment, decrement])

return (
    <div>
      <p>{count}</p>
      <button onClick={inc}>+</button>
      <button onClick={dec}>−</button>
    </div>
  )
}
```

---

### When to use Effector

Effector is especially useful if:

- you need a **strict separation of business logic and UI**;
- the project is large, with **multi-level state**;
- you want **type safety and predictability of data**;
- standard solutions (Redux, Zustand) feel bulky or inefficient.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.