Read a single state value
A component needs one primitive field such as a counter, flag, or username from Redux state.
Redux Toolkit · Hook
useSelector
useSelector lets a React component read a selected value from the Redux store. It subscribes the component to store updates and returns the selector's result.
How it works
useSelector receives a selector that is given the complete Redux store state. It returns the selector's result and subscribes the component to store updates; after an action, the selector runs again, and a changed result causes a re-render. The selector may return an existing value or compute derived data.
Syntax
useSelector(selector: (state: RootState) => Selected, equalityFn?: EqualityFn): SelectedParameters
| Name | Type | Description |
|---|---|---|
selector | (state) => selectedValue | A selector function receiving the complete Redux root state and returning the value to expose to the component. |
equalityFn | (previous, next) => boolean | Optional equality comparison function used to determine whether the selected result changed. |
Returns
The selected value returned by the selector.
Key points
- Use it inside a React component to read the state value that component needs.
- A selector can return a stored value directly or calculate a derived value.
- Write the selector against the root state, then navigate to the relevant slice or field.
- The hook's result is exactly whatever the selector returns.
- Calling the hook establishes the component's subscription to Redux updates.
- After dispatches, Redux checks the selected result so the component can update when needed.
Common mistakes
- Selectors run during component renders, so avoid unnecessary work and keep selector references stable when possible.
- Additional arguments are not passed directly; wrap a parameterized selector in a function that receives the root state.
Example: Read a slice of state
import { useSelector } from 'react-redux'
import type { RootState } from './store'
export function CounterValue() {
const count = useSelector((state: RootState) => state.counter.value)
return <span>{count}</span>
}The component reads the current counter value and updates when that selected value changes.
When to use it
Compute derived data
A view needs a filtered list, computed total, or other value derived from several state fields.
Select by an identifier
A component displays an entity selected by a route or prop identifier.
Interview questions
QWhat does useSelector do?
useSelector takes a selector function, calls it with the Redux root state, and returns that selector's result. It also subscribes the component to the store and re-runs the selector after dispatched actions.
Follow-up: What happens when the selector returns a new object each time? The changed reference can cause a re-render, so select individual fields or use a memoized selector.
QWhat may a selector return?
The selector can return a nested state value or derive new data. Its return value becomes the hook's return value, so the component receives exactly the selected result.
Follow-up: How can a selector use an ID? Pass an inline function to useSelector that receives state and calls the real selector with state plus the ID.
QHow is useSelector typed in TypeScript?
The selector is called with the entire Redux store state as its only argument. TypeScript users can annotate that argument with RootState or create a pre-typed hook with useSelector.withTypes<RootState>().
Follow-up: Why prefer a pre-typed hook? It avoids repeating the state type in component selectors and keeps the application's state typing centralized.
Related
useDispatchuseStoreProvidercreateSelectoruseSelector.withTypes