Direct state replacement
Use a literal, object, or other complete value when the next state does not depend on the current state.
React 19+ · Type Alias
SetStateAction
SetStateAction<S> is the union accepted by a React state setter: either a value of type S or a function that calculates the next S from previous state. It supports direct replacement and state-dependent updates.
How it works
SetStateAction<S> is the type accepted by a state setter from useState. It permits either a value of type S or a pure function receiving the previous state and returning the next state, which lets updates safely depend on pending state.
Syntax
type SetStateAction<S> = S | ((prevState: S) => S);Parameters
| Name | Type | Description |
|---|---|---|
action | S | ((prevState: S) => S) | The state value to use directly, or a pure updater function receiving the previous state and returning the next state. |
Key points
- The setter accepts either a state value or a function that computes the next state.
- Updater functions must be pure and return the next state rather than causing side effects.
- React queues updater functions and uses them to determine the state for a later render.
- Queued updater functions are applied during the next render in order.
Common mistakes
- Reading the state variable immediately after calling its setter still gives the value from the current render.
Example: Set a value or derive it from previous state
type SetStateAction<S> = S | ((prevState: S) => S);Use either a replacement state value or an updater function that derives the next value from the previous state.
When to use it
State-dependent updates
Use an updater callback when incrementing, toggling, or otherwise deriving state from its pending value.
Composing queued updates
Pass multiple queued updates that each need to build on the result of the preceding update.
Interview questions
QWhat does SetStateAction<S> represent?
SetStateAction<S> is a union of S and an updater function (prevState: S) => S. This allows a setter to receive either the next value directly or a calculation based on the previous state.
Follow-up: Why use the updater form for multiple dependent updates? React queues updater functions and applies them to the previous state during the next render, so each update can build on the preceding one.
QHow does React process the function form?
The updater function should be pure, accept the pending state, and return the next state. React queues it and evaluates it during the next render.
Follow-up: What should an updater avoid? It should not perform side effects or mutate the pending state; compute and return the next state instead.
QHow do the two union branches differ?
A direct value replaces the state with that value, while an updater function derives a replacement value from the previous state. The generic S is the state type in both branches.
Follow-up: How can a component update object state safely? Return a new object, commonly by copying the previous object and changing only the intended property.
Related
useStateComponentsetState