Spread Them: Leveraging the Spread Operator for Safer State Updates in React

You have seen state being updated like this, but have you ever wondered why it has become the convention that everyone uses?

setPerson((prevPerson) => ({ ...prevPerson, name: "Jane Doe" }));

State management is crucial in React applications for maintaining a predictable and reliable user interface. Proper handling of state updates is essential, and using the spread operator instead of directly modifying the state is a recommended best practice. But why is it so widely adopted? In this post, we will explore the benefits of using the spread operator for state updates, demonstrate its usage, and discuss the advantages it offers over direct state mutation.

React utilizes shallow comparison to determine whether a state has changed. Shallow comparison checks the reference of items in an object without recursively checking their values. While this approach is efficient and works well for primitive types like strings and numbers, it can be problematic when dealing with complex data types such as objects.

Let's consider an example to illustrate this point:

const [person, setPerson] = useState({
    id: 1,
    name: "John Doe",
});

let temp = person;
temp.name = "Jane Doe";
setPerson(temp);

In the code above, the person state is directly modified by assigning it to the temp variable and updating the name property. Although this approach may seem to work initially, it violates the principle of immutability, which is central to React's state management philosophy. React relies on the assumption that state is immutable to perform accurate state comparisons during the reconciliation process.

To update the state correctly and adhere to immutability principles, we need to create a new object that maintains the integrity of the original state. This is where the spread operator comes into play:

setPerson((prevPerson) => ({ ...prevPerson, name: "Jane Doe" }));

The correct approach is to use the functional form of the setPerson function, providing a callback that receives the previous state as prevPerson. By spreading the prevPerson, we create a shallow copy of the state object. Then, we modify the desired property (name) of the copied state object and pass it as the argument to setPerson. This ensures that React can accurately detect the state change and trigger the necessary updates.

Using the spread operator allows us to create copies of objects or arrays by value, ensuring that any changes made to the copy do not affect the original state. This approach maintains immutability and enables React's shallow comparison algorithm to accurately compare the state.

One might wonder why we don't use deep comparison instead of shallow comparison, making it necessary to explicitly manage immutability. While deep comparison checks the values of each item in the state recursively, it can be expensive, especially for complex data types. React decided to provide something better than the default JavaScript comparison and less expensive than deep comparison.

To summarize, updating state in React using the spread operator is a best practice that promotes immutability and enables efficient state comparisons. By creating new copies of state objects and modifying those copies, we ensure the integrity of the state and facilitate reliable state management within React applications.

So next time you update state in React, remember to embrace the spread operator and enjoy the benefits it brings to your state management journey.