Local reactive state
Keep framework-independent client state in a typed mutable container.
TanStack · Class
Store
Store is TanStack Store's writable reactive container. It holds typed state, supports updates and subscriptions, and can expose optional typed actions.
How it works
Store is a writable reactive container for a value. Construct it with an initial value, read the current state through state or get(), change it with setState(), and observe changes with subscribe(); optional actions can be attached during construction.
Syntax
new Store<T, TActions>(initialValue)
new Store<T, TActions>(getValue)
new Store<T, TActions>(initialValue, actionsFactory)Parameters
| Name | Type | Description |
|---|---|---|
initialValue / getValue | NonFunction<T> or () => T | Initial value or value-producing function used to initialize the store. |
actionsFactory | StoreActionsFactory<T, TActions> | Factory that creates the store's optional typed actions. |
Returns
A Store<T, TActions> instance; its subscribe method returns a Subscription and setState returns void.
Key points
- The state getter returns the store's current value using the store's generic value type.
- setState updates the value through an updater function and does not return a new state value.
- subscribe accepts an observer or callback and returns a Subscription for managing the listener.
- Optional actions supplied at construction are available through a readonly actions property.
Common mistakes
- The class is generic over both the stored value type and the optional actions type; preserve those types when exposing a store API.
- The getter overload creates a Store from a value-producing function, so distinguish that overload from construction with a direct initial value.
Example: Create and update a Store
import { Store } from '@tanstack/store'
const count = new Store(0)
const subscription = count.subscribe((value) => {
console.log(value)
})
count.setState((value) => value + 1)
subscription.unsubscribe()Creates a writable store, observes state changes, updates the value, and removes the subscription.
When to use it
Change subscriptions
Notify dependent code when a value changes.
Typed store actions
Bundle domain-specific commands with the state they modify.
Interview questions
QWhat is the core purpose of Store and which operations does it provide?
Store is a writable reactive state container. Its API exposes the current value through state or get(), changes it with setState(), and allows observers to react through subscribe().
Follow-up: How would you avoid leaving observers attached? Retain the Subscription returned by subscribe() and call its unsubscribe() method when the observer is no longer needed.
QHow can a Store expose custom actions?
The constructor accepts an initial value and can optionally receive an actions factory. The resulting actions are exposed through the store's readonly actions property.
Follow-up: Why use an actions factory? It provides typed, store-associated commands while keeping the state update logic attached to the store instance.
QHow do state updates and subscriptions work?
setState accepts an updater and returns void. subscribe accepts either an observer or a callback and returns a Subscription that can later be unsubscribed.
Follow-up: What should a caller use when it only needs side effects for each new value? Pass a callback function directly to subscribe rather than constructing a full observer object.
Related
ReadonlyStorecreateStoreStoreActionMapStoreActionsFactorySubscription