tanstack-react-store

TanStack React Store

Framework-agnostic reactive data store with a React adapter. Install @tanstack/react-store.

Core API

createStore

Create a writable store with an initial value, or a readonly derived store with a getter function.

import { createStore } from "@tanstack/react-store";

// Writable store
const countStore = createStore(0);
countStore.setState(() => 1);
console.log(countStore.state); // 1

// Object store
const appStore = createStore({ dogs: 0, cats: 0 });

// Derived (readonly) store — auto-updates when dependencies change
const doubled = createStore(() => countStore.state * 2);

Store class

• store.state / store.get() — read current value
• store.setState((prev) => next) — update with updater fn (not available on derived/readonly stores)
• store.subscribe((value) => void) — listen to changes, returns { unsubscribe }

Derived stores — previous value

Access the previous derived value via the prev argument:

const sum = createStore<number>((prev) => count.state + (prev ?? 0));

batch

Batch multiple setState calls; subscribers fire once at the end:

import { batch } from "@tanstack/react-store";

batch(() => {
  countStore.setState(() => 1);
  countStore.setState(() => 2);
});

React Integration

useStore

Subscribe a React component to a store. Accepts a selector for fine-grained re-renders.

import { createStore, useStore } from "@tanstack/react-store";

const store = createStore({ dogs: 0, cats: 0 });

function Display({ animal }: { animal: "dogs" | "cats" }) {
  // Only re-renders when state[animal] changes
  const count = useStore(store, (state) => state[animal]);
  return <div>{`${animal}: ${count}`}</div>;
}

Signature:

function useStore<TAtom extends AnyAtom | undefined, T>(
  atom: TAtom,
  selector: (snapshot: AtomState) => T,
  compare?: (a: T, b: T) => boolean,
): T;

• atom — store or atom instance
• selector — derive the slice of state needed (keeps re-renders minimal)
• compare — optional custom equality check (default: Object.is)