Features
- Event-driven architecture with stores, events, and effects
- Declarative data flow graph with explicit dependencies
- Framework-agnostic (React, Vue, Solid bindings)
- Built-in side effect management
- Scope-based SSR support for request isolation
Pros
- Predictable data flow through explicit event-store connections
- Excellent TypeScript support with strong type inference
- Tiny runtime (~5kb gzipped) with no dependencies
Cons
- Steep learning curve — unique API concepts to learn
- Smaller community than Redux, Zustand, or MobX
- Documentation can be challenging for newcomers
Overview
Effector is a reactive state management library built around three primitives: stores (state containers), events (triggers for state changes), and effects (side effects like API calls). These primitives are connected through a declarative data flow graph, making the relationships between state, actions, and side effects explicit and traceable.
Unlike flux-style libraries where actions flow through reducers, Effector lets you wire stores directly to events using on, sample, and combine operators. This creates a clear, inspectable graph of how data flows through your application. Effector also provides scope-based isolation for SSR, ensuring each request gets its own independent state.
When to Use
Effector is the right choice when you need explicit, traceable data flow in complex applications, when you want framework-agnostic state management that works across React, Vue, and Solid, or when SSR request isolation is important.
Getting Started
npm install effector effector-reactimport { createStore, createEvent } from "effector";
import { useUnit } from "effector-react";
const increment = createEvent();
const $count = createStore(0).on(increment, (n) => n + 1);
function Counter() {
const count = useUnit($count);
const onIncrement = useUnit(increment);
return <button onClick={onIncrement}>Count: {count}</button>;
}