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

            
              {`import { createStore } from '@tanstack/store'

                            const countStore = createStore(0)

                            // Subscribe to changes
                            countStore.subscribe(() => {
                            console.log(countStore.state)
                            })

                            // Update state
                            countStore.setState(() => 1)

                            // Derived stores
                            const double = createStore(() => 
                            countStore.state * 2
                            )`}

Quick Start

Get up and running with TanStack Store in minutes

Choose your preferred package manager to install TanStack Store: ```bash npm theme={null} npm install @tanstack/store ``` ```bash yarn theme={null} yarn add @tanstack/store ``` ```bash pnpm theme={null} pnpm add @tanstack/store ``` For framework-specific adapters, install the corresponding package (e.g., `@tanstack/react-store`, `@tanstack/vue-store`). Import `createStore` and initialize a store with an initial value: ```typescript theme={null} 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 store updates to react to state changes: ```typescript theme={null} 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() ``` For React, Vue, Solid, Angular, Svelte, or Preact, use the framework-specific adapter: ```tsx theme={null} import { useStore } from '@tanstack/react-store' function Counter() { const count = useStore(countStore, (state) => state) return ( ) } ``` ```vue theme={null} ``` ```tsx theme={null} import { useStore } from '@tanstack/solid-store' function Counter() { const count = useStore(countStore, (state) => state) return ( ) } ``` See the [Framework Guides](/frameworks/react) for complete integration examples.

Explore by Topic

Learn core concepts and integrate with your favorite framework

Create reactive stores to manage application state Build fine-grained reactive primitives with atoms Compute values automatically from other stores React to state changes with subscriptions Optimize performance with batched updates Handle asynchronous data with async atoms

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.