What is Effector?
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
- 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)- 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()- 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()
})- 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,
})- 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.
Short Answer
Interview readyPremium
A concise answer to help you respond confidently on this topic during an interview.