useReducer Hook in React

useReducer

The useReducer hook in React is a state management tool that helps manage complex state logic in a component. It centralizes state logic, making it easier to manage and test and handles complex state logic better than useState.

Key Concepts Of useReducer

1. Reducer Function:

   A pure function that takes two arguments:

   • The current state.
   • An action object.

   It returns a new state based on the action.

2. Action Object: An object that describes what happened. It typically has a type property (to specify the type of action) and optionally other data.

3. Initial State: The starting value for the state.

4. Dispatch Function: A function returned by useReducer that is used to trigger state changes by dispatching actions.

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:
      throw new Error("Unknown action type");
  }
}

export default function App() {
  const [state, dispatch] = useReducer(reducer, initialState);

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

---

Creating The Initial State In useReducer

When you use useReducer, you need to define an initial state. Sometimes, generating this state involves some logic, like creating arrays or performing calculations.

If you directly call the function that generates the initial state, it will run on every render, even though the initial state is only needed during the first render. This can waste resources if the calculation is complex.

function createInitialState(username) {
  // Some expensive calculation
}

function TodoList({ username }) {
  // This function is called every time the component re-renders!
  const [state, dispatch] = useReducer(reducer, createInitialState(username));
}

Here, createInitialState(username) is being executed on every render, even though you only need its result once.

To avoid recalculating the initial state on every render, you can pass the function (createInitialState) as the third argument to useReducer. This way, React only calls it during the first render.

function createInitialState(username) {
  // Some expensive calculation
}

function TodoList({ username }) {
  // `createInitialState` is only called once, during the first render
  const [state, dispatch] = useReducer(reducer, username, createInitialState);
}

Here:

• createInitialState takes username as an argument.
• React ensures it runs only during the first render, preventing unnecessary recalculations.

If your initializer function doesn’t need any arguments, you can pass null as the second argument to useReducer.

function createInitialState() {
  // Some setup logic
  return { todos: [] };
}

function TodoList() {
  const [state, dispatch] = useReducer(reducer, null, createInitialState);
}

In this case: createInitialState runs only once, and it doesn’t rely on any input like username.

---

useState vs useReducer

Both useState and useReducer are used for state management in React. However, they serve different purposes and are suited for different scenarios.

Feature	useState	useReducer
Complexity	Suitable for simple state	Best for complex state or multiple actions
Syntax	Provides state and setter function	Uses a reducer function and dispatch
State Structure	When working with primitive types like numbers, strings, or booleans, useState is sufficient	When working with objects or arrays as state, useReducer provides a more structured approach to updating the state.
Action Logic	Directly updates state with the setter function	Centralized logic in the reducer function. Decouples the state logic from the component logic
State Updates	Requires multiple state variables for complex logic	Can handle multiple state variables in one reducer
Performance	Lightweight, fewer re-renders	Handles complex logic efficiently
Example Use Cases	Toggle switches, input forms	Stateful components with intricate logic, e.g., managing a shopping cart