mediumFrontend

What is the difference between `useState` and `useReducer`?

Q: What is the difference between `useState` and `useReducer`?

**Core concept (TL;DR).** Both add state to a function component. useState is best for **simple, independent** values you update directly. useReducer centralises update logic in a **reducer** (state, action) => newState and you dispatch actions — better when state is **complex**, has many sub-values, or the next state depends on the previous one. Direct setter vs dispatch → reducer <text x="135" y="64" fill="#06b6d4" font-size="11" font-weight="

1.2k views

Understand the problem

useState is for simple state management, while useReducer is for more complex state logic, often involving multiple sub-values or next state depending on the previous one.

hooksstate managementuseStateuseReducer

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

A counter with useReducer

import { useReducer } from "react";

function reducer(state, action) {
  switch (action.type) {
    case "inc":   return { count: state.count + 1 };
    case "dec":   return { count: state.count - 1 };
    case "reset": return { count: 0 };
    default:      throw new Error("unknown action");
  }
}

export default function App() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <div style={{ padding: 24, fontFamily: "system-ui" }}>
      <h3>Count: {state.count}</h3>
      <button onClick={() => dispatch({ type: "dec" })}>-</button>
      <button onClick={() => dispatch({ type: "inc" })}>+</button>
      <button onClick={() => dispatch({ type: "reset" })}>reset</button>
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What are React's design principles?

What is the purpose of the `deps` array in `useEffect` and `useCallback`?