React Hooks: useReducer

Introduction

As React applications grow, managing complex state logic using useState can become difficult. When state updates depend on multiple actions or involve complex transitions, React provides the useReducer Hook.

useReducer is commonly used for handling structured state updates and is especially useful when state logic becomes more predictable and centralized.

This article explains what useReducer is, why and when to use it, how it works, examples, best practices, and interview questions, suitable for beginners and professionals.

What Is useReducer?

useReducer is a React Hook used to manage state using a reducer function, similar to how Redux works.

It is an alternative to useState when:

• State logic is complex
• Multiple state updates depend on actions
• State transitions need to be predictable

Basic Syntax of useReducer

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

• state holds the current state
• dispatch sends actions
• reducer defines how state changes
• initialState is the starting state

Understanding the Reducer Function

A reducer is a pure function that takes the current state and an action, and returns a new state.

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

Reducers must not modify the existing state directly.

Simple Counter Example Using useReducer

import { useReducer } from "react";

const initialState = { count: 0 };

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

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

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

export default Counter;

This example shows predictable state transitions based on actions.

Why Use useReducer Instead of useState?

useReducer is better when:

• State depends on previous state
• Multiple related state values exist
• Actions describe what happened clearly
• Logic needs to be centralized

useReducer vs useState

Passing Data with Actions

Actions can carry additional data.

dispatch({ type: "add", value: 5 });

case "add":
  return { count: state.count + action.value };

This allows flexible and reusable logic.

useReducer with useContext

useReducer is often combined with useContext for global state management.

const AppContext = createContext();

function AppProvider({ children }) {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <AppContext.Provider value={{ state, dispatch }}>
      {children}
    </AppContext.Provider>
  );
}

This pattern is a lightweight alternative to Redux.

Common Mistakes with useReducer

• Mutating state inside reducer
• Using useReducer for simple state
• Forgetting default case in reducer
• Writing side effects inside reducer

Best Practices

• Keep reducers pure
• Use descriptive action types
• Split reducers when logic grows
• Combine with context for global state

Interview Questions and Answers

What is useReducer used for?

useReducer is used to manage complex state logic in a predictable way.

When should you use useReducer instead of useState?

When state logic becomes complex or involves multiple actions.

Is useReducer similar to Redux?

Yes, it follows a similar reducer pattern but works locally within React.

Can useReducer replace Redux?

For small to medium applications, yes. For very large applications, Redux may still be preferred.