Using useReducer for Complex State Management

In React, managing state can become complex when you have multiple state variables or when the state transitions are intricate. While useState is perfect for simple state logic, React’s useReducer hook is a more suitable choice for managing complex state or situations where the next state depends on the previous state.

The useReducer hook is often preferred when:

• The state logic is complex.
• You need to manage an object or array as state.
• There are multiple state transitions that depend on each other.

1. What is useReducer?

The useReducer hook is an alternative to useState for managing state in React. It works similarly to how reducers work in Redux (hence the name). It uses a reducer function to update the state based on actions dispatched to it.

Syntax:

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

• reducer: A function that defines how the state should change based on the action.
• initialState: The initial state value for the state being managed.
• state: The current state returned by the reducer.
• dispatch: A function to send actions to the reducer to update the state.

2. How Does useReducer Work?

A reducer is a pure function that takes two arguments:

1. The current state (or the initial state on the first render).
2. The action dispatched (an object typically with a type property and optional payload).

The reducer returns the new state based on the action received.

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

3. Basic Example of useReducer

Here’s a basic example of using useReducer to manage a counter state:

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function counterReducer(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;
  }
}

const Counter = () => {
  const [state, dispatch] = useReducer(counterReducer, initialState);

  return (
    <div>
      <h1>Count: {state.count}</h1>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
      <button onClick={() => dispatch({ type: 'reset' })}>Reset</button>
    </div>
  );
};

export default Counter;

Explanation:

• initialState: The initial state for the counter is { count: 0 }.
• counterReducer: The reducer function handles the state transitions based on different actions (increment, decrement, reset).
• dispatch: We dispatch actions by calling dispatch with an action object. For example, dispatch({ type: 'increment' }) will increase the count by 1.

4. When to Use useReducer

While useState is enough for managing simple state, useReducer is better when:

• You have more complex state transitions.
• State depends on the previous state (like counter logic).
• You want to avoid prop drilling by handling complex state in a central reducer function.

5. Example: Managing Multiple States with useReducer

Here’s an example where you manage multiple states (user information, theme, etc.) using useReducer:

import React, { useReducer } from 'react';

// Initial state for the reducer
const initialState = {
  user: null,
  theme: 'light',
};

// Reducer function
function reducer(state, action) {
  switch (action.type) {
    case 'SET_USER':
      return { ...state, user: action.payload };
    case 'TOGGLE_THEME':
      return { ...state, theme: state.theme === 'light' ? 'dark' : 'light' };
    default:
      return state;
  }
}

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

  const handleLogin = () => {
    dispatch({
      type: 'SET_USER',
      payload: { name: 'John Doe', age: 30 },
    });
  };

  const toggleTheme = () => {
    dispatch({ type: 'TOGGLE_THEME' });
  };

  return (
    <div>
      <h1>User Profile</h1>
      {state.user ? (
        <div>
          <p>Name: {state.user.name}</p>
          <p>Age: {state.user.age}</p>
        </div>
      ) : (
        <button onClick={handleLogin}>Login</button>
      )}
      <button onClick={toggleTheme}>Toggle Theme (Current: {state.theme})</button>
    </div>
  );
};

export default UserProfile;

Explanation:

• Initial State: The initialState contains both user and theme.
• Reducer Function: The reducer handles two actions:
  • SET_USER to set user data.
  • TOGGLE_THEME to toggle between light and dark themes.
• State and Dispatch: useReducer returns state and dispatch, which we use to update the state based on dispatched actions.

6. Handling Complex State Transitions

useReducer is especially useful when the state has multiple properties that change based on different actions. This pattern centralizes your state logic and keeps your components cleaner.

For instance, if you need to update multiple properties of an object (like a form), useReducer can handle it neatly:

import React, { useReducer } from 'react';

const initialState = {
  firstName: '',
  lastName: '',
  email: '',
};

function formReducer(state, action) {
  switch (action.type) {
    case 'SET_FIELD':
      return { ...state, [action.field]: action.value };
    default:
      return state;
  }
}

const UserForm = () => {
  const [state, dispatch] = useReducer(formReducer, initialState);

  const handleChange = (e) => {
    const { name, value } = e.target;
    dispatch({ type: 'SET_FIELD', field: name, value });
  };

  return (
    <div>
      <h1>User Form</h1>
      <form>
        <label>
          First Name:
          <input
            type="text"
            name="firstName"
            value={state.firstName}
            onChange={handleChange}
          />
        </label>
        <br />
        <label>
          Last Name:
          <input
            type="text"
            name="lastName"
            value={state.lastName}
            onChange={handleChange}
          />
        </label>
        <br />
        <label>
          Email:
          <input
            type="email"
            name="email"
            value={state.email}
            onChange={handleChange}
          />
        </label>
      </form>
      <pre>{JSON.stringify(state, null, 2)}</pre>
    </div>
  );
};

export default UserForm;

Explanation:

• State Structure: We are managing a form with firstName, lastName, and email.
• Reducer: The formReducer updates specific fields based on the action type and field name.
• Handle Change: The handleChange function dispatches an action to update the relevant field in the state.

7. Advantages of useReducer

• Predictable State Transitions: useReducer makes it easy to follow state changes and their triggers by using actions and a central reducer function.
• Improved Readability: Complex logic is moved out of the component’s render method, leading to cleaner and more readable code.
• Better for Complex State Logic: If the state has multiple fields or if state transitions depend on previous state values, useReducer helps keep the logic organized.