Event-driven updates
Trigger a state transition from an event handler.
React 19+ · Type Alias
Dispatch
Dispatch is the function returned by useReducer for requesting a state update. Pass it one action; React gives that action and the current state to the reducer, then re-renders with the reducer's result.
How it works
React's official reference documents dispatch as the function returned by useReducer. It accepts one action, which React passes with the current state to the reducer; the reducer returns the next state, and React then re-renders with it.
Syntax
dispatch(action)Parameters
| Name | Type | Description |
|---|---|---|
action | any | The action performed by the user; it may be a value of any type. |
Returns
No return value.
Key points
- Dispatch schedules a state change and causes the component to render again.
- Call dispatch with one action value.
- Actions may use any value, although object actions with a type field are conventional.
- React supplies both inputs to the reducer when processing a dispatch.
- The reducer determines the replacement state from the current state and action.
- After the reducer runs, React stores the result and updates the rendered interface.
Common mistakes
- Reading the state immediately after dispatch still gives the value from the current render.
- Dispatch accepts exactly one action argument.
- Do not use dispatch's result as the updated state or as a returned value.
Example: Dispatching a reducer action
import { useReducer } from 'react';
type Action = { type: 'increment' } | { type: 'reset' };
function reducer(state: number, action: Action) {
switch (action.type) {
case 'increment': return state + 1;
case 'reset': return 0;
}
}
export default function Counter() {
const [count, dispatch] = useReducer(reducer, 0);
return (
<button onClick={() => dispatch({ type: 'increment' })}>
Count: {count}
</button>
);
}The reducer's dispatch function accepts an action and schedules the next state update.
When to use it
Action-based state logic
Send structured commands to a reducer.
Shared reducer dispatch
Expose state updates through context without prop drilling.
Related
useReducerreducerstateaction