What does dispatch() do?

ReactJunior~2 min read

What `dispatch()` does

dispatch() is a trigger for updating state, which tells the reducer (reducer) - "what needs to be done".

Put simply: dispatch(action) → calls reducer(state, action) → returns a new state → the component re-renders.

Syntax

javascript

const [state, dispatch] = useReducer(reducer, initialState);

state - the current state
dispatch - a function that sends an action to the reducer
reducer - a function that describes how the state changes

Example of `dispatch` at work

javascript

import { useReducer } from "react";

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
    </div>
  );
}

Here:

When the button is clicked → dispatch({ type: "increment" }) is called
React calls reducer(state, { type: "increment" })
reducer returns { count: state.count + 1 }
React updates state and re-renders the component with the new value

How `dispatch` works "under the hood"

dispatch() does not change state directly
React calls reducer(state, action)
If the returned state is different, the component re-renders

This guarantees clean update logic and predictability, just like in Redux.

What gets passed to `dispatch()`

dispatch accepts an action object - usually with a type field (required) and an optional payload (data).

javascript

dispatch({ type: "SET_NAME", payload: "Tim" });

In the reducer you can then use this data:

javascript

function reducer(state, action) {
  switch (action.type) {
    case "SET_NAME":
      return { ...state, name: action.payload };
    default:
      return state;
  }
}

Example with a form

javascript

function formReducer(state, action) {
  switch (action.type) {
    case "SET_FIELD":
      return { ...state, [action.field]: action.value };
    case "RESET":
      return { name: "", email: "" };
    default:
      return state;
  }
}

function Form() {
  const [state, dispatch] = useReducer(formReducer, { name: "", email: "" });

  return (
    <form>
      <input
        value={state.name}
        onChange={(e) =>
          dispatch({ type: "SET_FIELD", field: "name", value: e.target.value })
        }
      />
      <input
        value={state.email}
        onChange={(e) =>
          dispatch({ type: "SET_FIELD", field: "email", value: e.target.value })
        }
      />
      <button type="button" onClick={() => dispatch({ type: "RESET" })}>
        Reset
      </button>
    </form>
  );
}

Now dispatch is the single way to change the form's state. The component doesn't think about "what to change", it just reports "what happened".

Features of `dispatch`

Feature	Description
Does not change between renders	Can be safely passed through context
Asynchronous inside React	The state updates on the next render
Works like `dispatch` in Redux	Same concept of actions and reducers
Cannot change `state` directly	Only through the reducer

Summary

Question	Answer
What does `dispatch()` do	Sends an action (`action`) to the `reducer` to update state
How it works	`dispatch(action)` → `reducer(state, action)` → `setState(newState)`
What gets passed	An object `{ type, payload? }`
When to use it	When state needs to be managed centrally (especially complex state)
Analogy	"Tell the system what happened, not how to change it"

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.