Why does React State Need a New Object/Array?

If you have been using React for a while, you are familiar with how state update works. There are a lot of internal optimizations that React makes for faster rendering. And one of the implementation details of the React internals is that it does a check of whether the given state object has actually changed or not. But the behavior of assigning a new object/array trips up newcomers. Let us understand why does React need a new copy of an object/array when assigning the state.

Object.is() in JavaScript

Object.is() is a comparison operator in JavaScript. It is attached to Object.prototype and can be used to compare JavaScript values, both object as well as primitive values.

For an object:

const author1 = {name: "Saransh Kataria"};
const author2 = {name: "Saransh Kataria"};
Object.is(author1, author2); // false

Since objects are stored by reference, the comparison returns false.

How is this relevant with respect to React?

React uses Object.is() for comparison of previous and next state to determine whether or not to update the DOM or not. The relevant part for that case is:

const author1 = {name: "Saransh Kataria"};
author1.name = "Wisdom Geek";
Object.is(author1, author1); // true

Since we are mutating the same object and it’s properties, the comparison will always return true.

Therefore, when we do:

const [author, setAuthor] = useState({name:"Saransh Kataria")};

const updateName = () => {
  author.name = "Wisdom Geek";
  setAuthor(author)
}

In the update name function, we are updating the author object. And send the updated object to setAuthor. This will not update the UI even though we have updated the author object.

Why is the User Interface not updated?

As we saw previously, changing a property on an object does not change the reference of that object. And React uses Object.is() under the hood to determine if the state was updated or not when we invoke the setter function.

Since the object reference did not change, Object.is() returns false even though we did update some property on it. Therefore React does not feel the need to update the UI, because nothing has changed according to it.

For getting it to work correctly, we need to pass in a new reference to the useState function. And for doing that, we need to create a new object. And once we do that, Object.is() will return true because the references will not be the same and we will trigger a re-render.

const updateName = () => {
  setAuthor(prevState => {...prevState, name: "Wisdom Geek"});
}

This uses the spread syntax and the callback function to update the state. And we return a new object which does not have any properties that are directly referenced from the initial object. And we also update the property that we wanted to update.

The same logic applies to arrays as well since they are reference types as well.

Conclusion

Hope that that explanation demystifies React internals a bit and gives a better idea about the implementation detail of state management in React. If you have any questions, feel free to drop a comment below!

Originally published at https://www.wisdomgeek.com on May 25, 2021.