Best Practices for Updating and Merging State Objects with React useState Hook

Basic Methods of State Updates

When using the useState Hook in React functional components, state updates are a fundamental operation. For state of object type, developers typically face a choice between two update strategies. The first method involves updating directly based on the current state value:

const [myState, setMyState] = useState(INITIAL_STATE);
setMyState({
  ...myState,
  propB: false
});

This approach uses the spread operator to create a new object, preserving existing properties while updating specific ones. Superficially, this implementation appears concise and clear, but it may harbor risks in certain scenarios.

Advantages of Functional Updaters

The second method employs the functional updater form, accessing the latest state value through a callback function:

setMyState(prevState => ({
  ...prevState,
  propB: false
}));

The advantage of this approach lies in its ability to ensure updates based on the most recent state value, avoiding race conditions caused by the asynchronous nature of state updates. React batches state updates, and when multiple state update functions are called consecutively based on the same current state value, unexpected results may occur.

Practical Demonstration of Race Conditions

Consider an example of a counter component with two different increment implementations:

const { useState } = React;

function App() {
  const [count, setCount] = useState(0);

  function brokenIncrement() {
    setCount(count + 1);
    setCount(count + 1);
  }

  function increment() {
    setCount(count => count + 1);
    setCount(count => count + 1);
  }

  return (
    <div>
      <div>{count}</div>
      <button onClick={brokenIncrement}>Broken increment</button>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

In the brokenIncrement function, both setCount(count + 1) calls are based on the same count value, resulting in only one actual increment. In contrast, the increment function uses functional updaters to ensure each call is based on the latest value after the previous update, achieving the expected two increments.

Special Considerations for Object State Updates

Unlike setState in class components, the update function of useState does not automatically merge objects. This means that when updating object state, property merging must be handled explicitly. The functional updater form is particularly useful in common scenarios like input handling:

const [state, setState] = useState({ fName: "", lName: "" });
const handleChange = e => {
    const { name, value } = e.target;
    setState(prevState => ({
        ...prevState,
        [name]: value
    }));
};

This pattern ensures that when updating individual fields, other fields remain unchanged while avoiding potential race conditions.

Related Patterns for Array State Updates

Although the primary discussion focuses on object state, similar principles apply to array state. When needing to reset all objects in an array, directly replacing the entire array is usually more appropriate:

setState([{car:""}, {car:""}]);

Attempting to use the spread operator to "update" multiple objects in an array often introduces unnecessary complexity, as the spread operator essentially creates new content rather than modifying existing content.

Best Practices Summary

Based on the above analysis, the following best practices can be derived: When state updates do not depend on previous state values, the direct method based on current state can be used; when state updates depend on previous state, or when multiple state updates are called in rapid succession, the functional updater form must be used. For object state, always remember to handle property merging explicitly, as useState does not perform this automatically. In most practical scenarios, especially those involving user interactions or asynchronous operations, it is recommended to default to using the functional updater form to ensure code robustness and predictability.