Suggest an edit

Improve this article

Refine the answer for “What does dispatch() do?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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 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:

1. When the button is clicked → `dispatch({ type: "increment" })` is called
2. React calls `reducer(state, { type: "increment" })`
3. `reducer` returns `{ count: state.count + 1 }`
4. 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" |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts571 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.