DHANRAJ S

Posted on May 13

useReducer in React — Why It Exists and How to Use It Simply

#javascript #react #beginners #webdev

Hey!

Before we start — let me show you a problem.

You are building a simple counter. You use useState.

const [count, setCount] = useState(0);

Works perfectly. No complaints.

Now the requirements change.

Your counter needs to:

Increment by 1
Decrement by 1
Reset to 0
Increment by a custom amount
Decrement by a custom amount

So you start adding more logic.

function increment() {
  setCount(count + 1);
}

function decrement() {
  if (count > 0) {
    setCount(count - 1);
  }
}

function reset() {
  setCount(0);
}

function incrementByAmount(amount) {
  setCount(count + amount);
}

function decrementByAmount(amount) {
  if (count - amount >= 0) {
    setCount(count - amount);
  }
}

Five separate functions. All of them scattered around your component. All of them touching the same state in different ways.

Now imagine your component has 3 or 4 pieces of state — not just a counter. All with their own update functions.

Your component becomes a mess. Hard to read. Hard to debug. Hard to maintain.

That is the problem useReducer solves.

1. What Is the Real Problem With useState?

useState is great. For simple state — a number, a boolean, a string — it is perfect.

But when your state has many ways to update — things fall apart.

Here is specifically what goes wrong:

Logic is scattered.

Every update has its own function. Those functions are spread all over the component. When a bug appears — you have to hunt through all of them to find it.

Hard to see the full picture.

When you read the component — you cannot easily answer "what are all the ways this state can change?" You have to read every function one by one.

State updates depend on each other.

Sometimes changing one value should affect another. With multiple useState calls — coordinating this gets messy fast.

Quick question for you.

Imagine you have a shopping cart with items, totalPrice, and itemCount. Every time you add an item — all three need to update together. How would you handle that with useState?

You would need to call three setters every single time. Miss one — your UI shows wrong data.

That is where useReducer shines.

2. What Is useReducer?

useReducer is a React hook that manages state through a single function called a reducer.

Instead of calling different setter functions — you send an action. The reducer decides how the state changes based on that action.

Think of it like a bank teller.

You do not walk into a bank and directly change the numbers in the computer yourself. You give the teller an instruction — "deposit 500" or "withdraw 200". The teller looks at your current balance, applies the instruction, and gives you the new balance.

The teller is the reducer.
Your instruction is the action.
The balance is the state.

3. The Syntax

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

Let us break this down.

state — the current state. Whatever is stored right now.

dispatch — the function you call to trigger a state change. You pass it an action.

reducer — a function you write that takes the current state and the action, and returns the new state.

initialState — the starting value of your state.

4. What Is a Reducer Function?

The reducer is where all your state logic lives. In one place.

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

state — what the state currently is.

action — an object that describes what happened. It has a type property that tells the reducer what to do.

The reducer reads the action.type and returns the new state.

That is it. Nothing magic. Just a function with a switch statement.

5. Fixing the Counter — Using useReducer

Let us rewrite the messy counter from the beginning using useReducer.

import { useReducer } from "react";

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return state + 1;
    case "decrement":
      return state > 0 ? state - 1 : state;
    case "reset":
      return 0;
    case "incrementByAmount":
      return state + action.payload;
    case "decrementByAmount":
      return state - action.payload >= 0 ? state - action.payload : state;
    default:
      return state;
  }
}

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch({ type: "increment" })}>+1</button>
      <button onClick={() => dispatch({ type: "decrement" })}>-1</button>
      <button onClick={() => dispatch({ type: "reset" })}>Reset</button>
      <button onClick={() => dispatch({ type: "incrementByAmount", payload: 5 })}>+5</button>
      <button onClick={() => dispatch({ type: "decrementByAmount", payload: 5 })}>-5</button>
    </div>
  );
}

Notice what changed.

The component has no update functions anymore. It just dispatches actions.

All the logic — every possible way the state can change — lives inside the reducer. One function. One place.

Quick question for you.

If a bug appears and the decrement is not working correctly — where do you look?

The reducer. Just the reducer. You do not have to hunt through the entire component. All the logic is in one spot.

That is the real benefit.

6. What Is payload?

You probably noticed action.payload in the example above.

dispatch({ type: "incrementByAmount", payload: 5 });

payload is any extra data you want to send along with the action.

type tells the reducer what to do.
payload tells the reducer what to do it with.

"Increment" — no payload needed. The amount is always 1.
"IncrementByAmount" — needs a payload because the amount changes.

Think of it like an instruction to a chef.

"Make a pizza" — no extra info needed.
"Make a pizza with extra cheese" — that "extra cheese" is the payload.

7. useState vs useReducer — When to Use Which

Both manage state. So how do you decide?

	useState	useReducer
Best for	Simple values — number, string, boolean	Complex state with multiple update types
Update logic	Spread across multiple functions	All in one reducer function
Number of states	One value per useState	Multiple related values in one object
Readability	Great for simple cases	Better when logic grows
Debugging	Can get messy with many setters	All cases visible in one place

Simple rule.

If you are updating state in more than 3 or 4 different ways — consider useReducer.

If your state is an object with multiple fields that update together — useReducer is the better choice.

If it is just a simple toggle or a counter with one action — useState is perfectly fine.

8. One Common Mistake — Mutating State Directly

The reducer must always return a new state. Never change the existing state directly.

If you mutate state directly — React does not detect the change. No re-render. The screen does not update.

Always return a fresh object or value from the reducer.

Quick Summary — 5 Things to Remember

useState struggles with complex state — when there are many update functions scattered around, it gets hard to manage.
useReducer puts all logic in one place — the reducer handles every possible state change. One function. Easy to find. Easy to debug.
You dispatch actions — not call setters — dispatch({ type: "increment" }) tells the reducer what happened. The reducer decides what to do.
payload carries extra data — when your action needs more info, add it as payload in the action object.
Never mutate state — always return a new value from the reducer. React needs a new reference to detect the change and re-render.

useReducer feels like extra work at first. The reducer, the actions, the dispatch — it seems like a lot for something useState could handle in one line.

But when your state grows — and it will grow — you will be glad everything is in one place.

If something did not click — drop a comment below. Happy to explain it differently.

Thanks for reading. Keep building.