TanStack Store - Reactive State Management
Learn reactive state management with TanStack Store featuring derived state, automatic updates, and framework-agnostic design
What is this?
TanStack Store is a framework-agnostic state management library that provides reactive state updates and derived state computation. It's lightweight, type-safe, and works seamlessly with React, Vue, Solid, and vanilla JavaScript.
This showcase demonstrates a simple form with derived state: as you type the first and last names, the full name updates automatically using a derived store.
Why use this?
- Framework agnostic: Works with any JavaScript framework or vanilla JS
- Derived state: Automatically compute values from other state
- Type-safe: Full TypeScript support with inference
- Lightweight: Minimal bundle size with zero dependencies
- Fine-grained reactivity: Components only re-render when their subscribed state changes
- DevTools support: Built-in dev tools for debugging
Interactive Demo
Jane Smith
The full name updates automatically as you type - it's a derived value computed from firstName and lastName stores.
How it works
Creating a Store
Create a store with initial state:
Derived State
Create derived values that automatically update when dependencies change:
Using Store in Components
Subscribe to store updates using the useStore hook:
Updating State
Update state using setState with an updater function:
Key Concepts
- Store: Container for state with methods to read and update
- Derived: Computed values that depend on other stores
- Selectors: Extract specific pieces of state for fine-grained updates
- Reactivity: Components automatically re-render when subscribed state changes
- Mount: Derived stores must be mounted to stay active
Related Projects
Related project: react-patterns-tanstack-table
Note: Related project cards will be populated from the registry