Using useReducer but forgetting to return a new state in the reducer function

In React, when using the useReducer hook, it’s important that the reducer function always returns a new state rather than mutating the existing state directly. If you forget to return a new state and instead mutate the existing state, it can lead to unexpected behavior, bugs, or state updates not being detected by React.

What is `useReducer`?

The useReducer hook is often used when managing complex state logic in React components. It works similarly to useState, but it gives you more control by using a reducer function that updates the state based on the action dispatched.

The signature of useReducer looks like this:

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

The reducer is a function that receives the current state and an action, and returns a new state based on the action. The reducer should never mutate the state directly but instead return a new state object.

Example of Incorrect Usage: Mutating the State

Here’s an example where the state is mutated directly inside the reducer, which can cause issues.

import React, { useReducer } from 'react';

const initialState = { count: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      state.count += 1;  // Mutating state directly (BAD PRACTICE)
      return state;
    default:
      return state;
  }
};

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

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
    </div>
  );
}

export default Counter;

Problems with Mutating the State:

State Mutation: React relies on state immutability to detect changes. If you mutate the state directly instead of returning a new one, React will not detect that the state has changed, and the component may not re-render as expected.
Unexpected Behavior: Mutating the state directly can lead to bugs because React might not recognize that the state has changed. This might result in stale state being used in the next render cycle.
Non-predictable behavior: When you mutate state directly, it can make your code harder to reason about because it introduces side effects.

Correct Approach: Returning a New State

To fix this issue, you need to ensure that you never mutate the state directly. Instead, always return a new state object (or a new version of the state) in your reducer.

Corrected Example: Returning a New State

import React, { useReducer } from 'react';

const initialState = { count: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      // Return a new state instead of mutating
      return { ...state, count: state.count + 1 };  // Create a new state object
    default:
      return state;
  }
};

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

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
    </div>
  );
}

export default Counter;

Why This Works:

State immutability: By using the spread operator ({ ...state, count: state.count + 1 }), we are creating a new state object instead of modifying the existing one. React will detect that the state has changed and re-render the component as needed.
Predictable state changes: Returning a new state ensures that the state changes are predictable and easy to track.

Best Practices for Reducers:

Always return a new state: When updating state inside a reducer, always return a new object or new array instead of mutating the existing state. This allows React to properly detect changes and trigger re-renders.
Use spread syntax ({...state}): When updating specific fields or properties in state, use the spread operator ({ ...state }) to create a copy of the current state and then modify only the necessary part of it.
Avoid side effects: Reducers should be pure functions. They should not have side effects (e.g., calling API functions, modifying global variables). A reducer should only return the new state based on the action.
Use useReducer when state logic is complex: If you have multiple actions affecting different parts of state, useReducer helps in organizing and managing that complexity.

Example: A More Complex Reducer

Here’s an example with multiple actions, where we update different parts of the state using a new state object each time.

import React, { useReducer } from 'react';

const initialState = { count: 0, name: 'John' };

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + 1 };
    case 'decrement':
      return { ...state, count: state.count - 1 };
    case 'setName':
      return { ...state, name: action.payload };
    default:
      return state;
  }
};

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

  return (
    <div>
      <p>Count: {state.count}</p>
      <p>Name: {state.name}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
      <button onClick={() => dispatch({ type: 'setName', payload: 'Alice' })}>Set Name</button>
    </div>
  );
}

export default Counter;

Key Takeaways:

Never mutate the state in the reducer function. Always return a new state object.
Use the spread operator (...state) to create a copy of the current state when updating it.
Reducers are pure functions: They should not contain side effects or modify external variables.
useReducer is useful for managing complex state logic where the next state depends on the previous state or when there are multiple actions.

What is useReducer?