Skip to content


Legend-State is designed to have a lean core that allows you and your team to add additional features, so it has configuration functions to add features as you like.

These functions add features and augment the TypeScript interface to add the new functions, so just importing the file adds the interface.

These configuration functions only need to be called once, before their effects are used, and then they will work anywhere. It should generally be at the top of the file that’s the entry point of your app or is imported everywhere, or it could be at the top of a global state file.


enableReactTracking has two modes, to either enable automatic tracking or warn if you forgot observer.


This makes React components warn if using get() without being wrapped in observer. This is a very helpful way to catch the easy mistake of forgetting observer.

It only runs when process.env.NODE_ENV === 'development' so it won’t disrupt your app in production.

import { enableReactTracking } from "@legendapp/state/config/enableReactTracking"
warnUnobserved: true,

auto tracking

This makes React components auto-track observables without using observer, so all you need to do is get() an observable and the component will re-render when it changes. This is useful for rapid prototyping as observing is done for you.

import { enableReactTracking } from "@legendapp/state/config/enableReactTracking"
auto: true,

Now you can just get() and components will be automatically reactive.

import { observable } from "@legendapp/state"
const state$ = observable({ test: "hi" })
function Component() {
// This makes this component responsive to test changing
const test = state$.test.get()
return <div>{test}</div>

Note that enableReactTracking and observer can be used together - observer will optimize away the auto tracking behavior in favor of its more efficient tracking.

enableReactComponents, enableReactNativeComponents

Legend-State provides reactive versions of all platform components with reactive props. To use these components first enable the version for your platform:

// React
import { enableReactComponents } from "@legendapp/state/config/enableReactComponents"
// React Native
import { enableReactNativeComponents } from "@legendapp/state/config/enableReactNativeComponents"

Now you can use Reactive.

import { Reactive } from "@legendapp/state/react"
function Component() {
return (
$style={() => ({
color: state.age.get() > 5 ? "green" : "red",
$className={() => (state.age.get() > 5 ? "kid" : "baby")}

See Reactive components for more details.


This enables accessing and setting the raw value of an observable directly. It’s a shorthand for get() and set(...).

import { enable$GetSet } from "@legendapp/state/config/enable$GetSet";

Now you can access/modify observables directly.

import { observable } from "@legendapp/state"
const state$ = observable({ test: "hi", num: 0 })
// $ is a shorthand for get()
const testValue = state$.test.$
// Assign to $ as a shorthand for set()
state$.test.$ = "hello"
// Assign objects too just like you can with set()
state$.$ = { test: "hello" }
// Incrementing works as you'd expect


This enables accessing and setting the raw value of an observable directly without tracking or notifying listeners. Getting with ._ is a shorthand for peek() and assigning to ._ modifies the underlying data without notifying. Modifying data without notifying is likely necessary in only very specific scenarios so use it with care.

import { enable_PeekAssign } from "@legendapp/state/config/enable_PeekAssign";

Now you can access/modify observables directly without notifying.

import { observable } from "@legendapp/state"
const state$ = observable({ test: "hi", num: 0 })
// _ is a shorthand for peek()
const testValue = state$.test._
// Assign to _ to modify the underlying object without notifying listeners
state$.test._ = "hello"
// Assign objects too
state$._ = { test: "hello" }