Framework Agnostic Reactive Store

Type-safe state management with fine-grained reactivity. Build reactive applications with atoms, derived stores, and framework adapters for React, Vue, Solid, Angular, Svelte, and Preact.

Get Started API Reference

Quick Start

Get up and running with TanStack Store in minutes

Install the package

Choose your preferred package manager to install TanStack Store:

npm install @tanstack/store

For framework-specific adapters, install the corresponding package (e.g., @tanstack/react-store, @tanstack/vue-store).

Create your first store

Import createStore and initialize a store with an initial value:

import { createStore } from '@tanstack/store'

const countStore = createStore(0)

console.log(countStore.state) // 0

Stores can hold any JavaScript value: primitives, objects, arrays, or complex nested structures.

Subscribe to changes

Subscribe to store updates to react to state changes:

const { unsubscribe } = countStore.subscribe(() => {
  console.log('Count changed:', countStore.state)
})

countStore.setState(() => 1)  // Logs: "Count changed: 1"
countStore.setState(() => 2)  // Logs: "Count changed: 2"

// Cleanup when done
unsubscribe()

Use with your framework

For React, Vue, Solid, Angular, Svelte, or Preact, use the framework-specific adapter:

React
Vue
Solid

import { useStore } from '@tanstack/react-store'

function Counter() {
  const count = useStore(countStore, (state) => state)
  
  return (
    <button onClick={() => countStore.setState((c) => c + 1)}>
      Count: {count}
    </button>
  )
}

<script setup>
import { useStore } from '@tanstack/vue-store'

const count = useStore(countStore, (state) => state)
</script>

<template>
  <button @click="countStore.setState((c) => c + 1)">
    Count: {{ count }}
  </button>
</template>

import { useStore } from '@tanstack/solid-store'

function Counter() {
  const count = useStore(countStore, (state) => state)
  
  return (
    <button onClick={() => countStore.setState((c) => c + 1)}>
      Count: {count()}
    </button>
  )
}

See the Framework Guides for complete integration examples.

Explore by Topic

Learn core concepts and integrate with your favorite framework

Stores

Create reactive stores to manage application state

Atoms

Build fine-grained reactive primitives with atoms

Derived Stores

Compute values automatically from other stores

Subscriptions

React to state changes with subscriptions

Batching

Optimize performance with batched updates

Async Atoms

Handle asynchronous data with async atoms

Framework Support

First-class adapters for all major JavaScript frameworks

React

Use TanStack Store with React hooks

Learn more

Vue

Integrate with Vue’s composition API

Learn more

Solid

Leverage Solid’s fine-grained reactivity

Learn more

Angular

Use dependency injection with Angular

Learn more

Svelte

Integrate with Svelte stores seamlessly

Learn more

Preact

Lightweight state management for Preact

Learn more

Key Features

Built for performance, developer experience, and flexibility

Fine-Grained Reactivity

Update only what changes with fine-grained subscriptions. No unnecessary re-renders or computations.

Type-Safe

Full TypeScript support with inference. Catch errors at compile time, not runtime.