Subscribe to store state
A component needs a reactive value from a TanStack Store.
TanStack · Hook
useStore
useStore reads a value from a TanStack Store source, optionally selecting a slice and defining comparison behavior. In React, it is a deprecated alias for useSelector.
How it works
In TanStack Store React, useStore reads a store or derived value and optionally applies a selector to produce the value used by the component. It is a deprecated alias for useSelector, and the selected result can optionally be compared with a custom comparison function.
Syntax
function useStore<TSource, TSelected>(source, selector?, compare?): TSelected;Parameters
| Name | Type | Description |
|---|---|---|
source | TSource | The store-like source whose snapshot is observed. |
selector | (snapshot) => TSelected | Optional function receiving the snapshot and returning the selected value. |
compare | (a, b) => boolean | Optional function comparing the previous and next selected values. |
Returns
TSelected
Key points
- The hook is generic over the source type and the selected result type.
- Its optional selector derives the value returned to the component, while compare can customize equality checks.
- Without an explicit selection, the selected type defaults from the source type.
- A selector can read only one property, such as count, from the store snapshot.
Common mistakes
- useStore is deprecated; use useSelector for new code.
Example: Read a selected store value
import { useStore } from '@tanstack/react-store'
function Counter({ counterStore }) {
const count = useStore(counterStore, (state) => state.count)
return <span>{count}</span>
}Selects and renders the counter value from a TanStack Store instance.
When to use it
Select a state slice
A component should consume only one field from a larger snapshot.
Customize comparison
A selected value needs custom equality behavior.
Interview questions
QWhat does useStore do?
useStore accepts a source, an optional selector, and an optional comparison function. It returns the selected value, or the source value when no selector is supplied.
Follow-up: What should new code use instead? Use useSelector, because the documentation marks useStore as its deprecated alias.
QWhat are useStore's parameters?
The source is the store-like object being observed, the selector maps its snapshot to the value the component needs, and compare can determine whether two selected values are equal.
Follow-up: Why select a smaller value? Selecting only the required slice can avoid making a component depend on unrelated state changes.
QWhat does useStore return?
The hook returns TSelected. TSelected defaults to the source's type when no selector is provided, so the returned value reflects either the selected snapshot or the complete source value.
Follow-up: How can selection behavior be customized? Pass a selector and, when needed, a comparison function for selected values.
Related
useSelectoruseAtomcreateStore