✅ What is useReducer Hook in React?

The useReducer hook in React is an alternative to useState for managing complex state logic. While useState works perfectly for simple cases like counters or boolean toggles, useReducer is better suited when state updates depend on multiple actions, when the logic becomes harder to track, or when several state values are related to each other.
It follows the well-known Reducer Pattern (popularized by Redux), which makes state transitions predictable, structured, and easier to debug.

🚀 Syntax

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

state – The current state value
dispatch – A function used to send actions
reducer – A pure function that receives (state, action) and returns a new state
initialState – The initial value of the state

🔧 Example 1: Counter with useReducer

import React, { useReducer } from "react";

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

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

  return (
    <div>
      <h2>Count: {state.count}</h2>
      <button onClick={() => dispatch({ type: "increment" })}>➕ Increment</button>
      <button onClick={() => dispatch({ type: "decrement" })}>➖ Decrement</button>
      <button onClick={() => dispatch({ type: "reset" })}>🔄 Reset</button>
    </div>
  );
}

In this example, every state update flows through the reducer, keeping the logic centralized and predictable.

🧠 Key Concepts

Predictable state updates – All changes are handled in one reducer function
Centralized logic – Easier to understand and maintain complex updates
Action-driven updates – State changes happen based on explicit action types
Reusable logic – Reducers can be reused across components

🔄 Example 2: Managing Form State with useReducer

import React, { useReducer } from "react";

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

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

  return (
    <div>
      <input
        type="text"
        placeholder="Name"
        value={state.name}
        onChange={(e) =>
          dispatch({ type: "update_field", field: "name", value: e.target.value })
        }
      />
      <input
        type="email"
        placeholder="Email"
        value={state.email}
        onChange={(e) =>
          dispatch({ type: "update_field", field: "email", value: e.target.value })
        }
      />
      <button onClick={() => dispatch({ type: "reset" })}>Reset</button>
      <h3>
        Preview: {state.name} ({state.email})
      </h3>
    </div>
  );
}

This example shows how useReducer simplifies form handling when multiple inputs update the same state object.

📌 When to Use useReducer Instead of useState

When state logic is complex or involves many conditions
When the next state depends heavily on the previous state
When multiple actions trigger different updates
When you want a Redux-like pattern without adding external libraries

🧾 Conclusion

The useReducer hook is a powerful tool for managing complex state in React. It brings structure, predictability, and clarity to state updates, especially as applications grow in size and complexity. While useState is still the best choice for simple scenarios, useReducer becomes invaluable when state logic starts to scale.