Features
- Proxy-based fine-grained reactivity
- Built-in persistence (localStorage, AsyncStorage, SQLite)
- Sync engine for real-time and offline-first apps
- Automatic optimized rendering
- Observable-based API with signals support
Pros
- Fastest state management library in benchmarks
- Built-in persistence and sync eliminates boilerplate
- Fine-grained reactivity without manual optimization
Cons
- Smaller community and ecosystem
- Proxy-based approach has learning curve
- Documentation is less extensive than mainstream alternatives
Overview
Legend State is a high-performance reactive state management library that uses JavaScript Proxies for fine-grained reactivity. It automatically tracks which properties are accessed and only re-renders the specific components that depend on changed values — achieving the best benchmark performance among React state libraries.
Legend State’s standout feature is its built-in persistence and sync system. You can persist state to localStorage, AsyncStorage, or SQLite with a single configuration, and the sync engine handles real-time synchronization with remote backends. This makes it particularly compelling for offline-first applications.
When to Use
Legend State is the right choice when performance is critical, when you need built-in persistence and sync capabilities, or when building offline-first applications. It’s also great for developers who want proxy-based reactivity with more features than Valtio.
Getting Started
npm install @legendapp/state @legendapp/state/reactimport { observable } from "@legendapp/state";
import { observer } from "@legendapp/state/react";
const state$ = observable({ count: 0 });
const Counter = observer(function Counter() {
return (
<button onClick={() => state$.count.set((c) => c + 1)}>
Count: {state$.count.get()}
</button>
);
});