Effector — Reactive State Manager for JavaScript

Introduction

Effector is a reactive state manager built around three primitives: events (signals), stores (reactive values), and effects (async operations). It models application logic as an explicit data-flow graph, making state changes predictable and traceable without hidden side effects.

What Effector Does

• Manages application state with reactive stores that update automatically when upstream events fire
• Handles async side effects (API calls, timers) as first-class effect primitives with pending/done/fail tracking
• Supports derived stores via combine and computed values that update only when dependencies change
• Works framework-agnostically and has official bindings for React, Vue, and Solid
• Enables server-side rendering with Scope isolation for per-request state

Architecture Overview

Effector builds a directed acyclic graph of units (events, stores, effects) at definition time. When an event fires, Effector traverses the graph synchronously, updating stores and triggering watchers in topological order. Effects handle async work outside the graph and feed results back as done/fail events. The graph is static and analyzable, enabling features like dead-code elimination and SSR scope isolation.

Self-Hosting & Configuration

• Install the core package and your framework binding: npm install effector effector-react
• Define events, stores, and effects in plain JS/TS files (no decorators or classes needed)
• Use fork() and Scope for server-side rendering with isolated per-request state
• Enable the Effector DevTools browser extension for graph visualization and time-travel debugging
• Integrate with the effector/babel-plugin for automatic unit naming in development

Key Features

• Tiny bundle: under 10 KB gzipped with zero dependencies
• TypeScript-first: full type inference for events, stores, effects, and their connections
• Predictable updates: synchronous, glitch-free, topologically ordered store updates
• SSR-ready: fork() creates isolated state scopes for server rendering without global singletons
• Framework bindings for React (useUnit hook), Vue (useVModel), and Solid with identical APIs

Comparison with Similar Tools

• Redux — Single global store with reducers and middleware; Effector uses multiple small stores with explicit event-driven connections
• Zustand — Minimal hook-based store; Effector provides a structured graph model with events, effects, and derived stores
• MobX — Proxy-based reactivity with mutable state; Effector uses immutable updates with an explicit event graph
• Jotai — Atom-based bottom-up state; Effector is graph-based with top-down event flow and built-in async effect handling

FAQ

Q: Is Effector suitable for large applications? A: Yes. The explicit graph model scales well because each unit has clear inputs and outputs. Teams can reason about data flow without tracing through middleware chains.

Q: How does SSR work with Effector? A: Use fork() to create an isolated Scope per request. Run your application logic within the scope, serialize the resulting state, and hydrate it on the client.

Q: Can I use Effector without React? A: Yes. The core effector package is framework-agnostic. Use it with vanilla JS, or install effector-vue or effector-solid for framework bindings.

Q: How do I handle async operations? A: Use createEffect(). It returns an effect unit with .pending (boolean store), .done and .fail events. Connect them to stores using .on() for a clear async flow.

Sources

• https://github.com/effector/effector
• https://effector.dev