effector
Effector is a reactive state manager that provides a principled approach to modeling business logic with stores, events, and effects as first-class primitives. …
Installation
npm install effector effector-react
yarn add effector effector-react
pnpm add effector effector-react
Import
import { createStore, createEvent } from 'effector';Quick Example
import { 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);
return <button onClick={() => increment()}>{count}</button>;
}About effector
Effector is a reactive state manager that provides a principled approach to modeling business logic with stores, events, and effects as first-class primitives. Stores hold state values, events represent intentions or notifications, and effects handle side effects like API calls. These units are connected through a declarative API: store.on(event, reducer) updates a store when an event fires, sample({ source, clock, target }) derives and routes data between units, and combine merges multiple stores into derived state. Effector's key innovation is its static graph-based architecture — the dependency relationships between stores, events, and effects are declared upfront and analyzed statically, enabling advanced optimizations, debugging, and server-side rendering with request-scoped state using fork(). The fork API creates isolated state instances, solving the shared state problem in SSR without React Context. Effector supports TypeScript with excellent type inference, provides framework bindings for React (effector-react), Vue (effector-vue), and Solid, and includes devtools for visualizing the reactive graph. Effector's declarative approach separates business logic from UI concerns, making complex state flows testable and maintainable. The library is particularly valued in large applications where explicit data flow management is critical.
Quick Facts
| Package | effector |
| Category | State Management |
| Weekly Downloads | 100K+ |
| License | MIT |
| Install | npm install effector effector-react |
Related Packages
Redux is a predictable state container for JavaScript applications, most commonly used with React bu…
MobX is a battle-tested state management library that makes state management simple and scalable thr…
Zustand is a small, fast, and scalable state management library for React that provides a simple hoo…
XState is a state management and orchestration library that uses finite state machines and statechar…
Browse npm Packages by Category
Explore our reference of 200 popular npm packages with install commands, examples, and quick-start guides.