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 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.

- Advertisement -

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 for 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!

Recent Articles

How to sort a Set in JavaScript

ES6 introduced the set data structure in JavaScript. But sets are not ordered abstract data structures. So there is no .sort() property...

Debugging CSS scroll using one simple style

I have been doing a lot of complicated front-end work off lately and that always brings me back to the class conundrum...

CSS :has a parent selector now

CSS now includes a :has selector that allows us to apply styles on the basis of what is happening inside an element....

How to fix “invalid active developer path” after MacOS update

If you are here, then you are getting an "invalid active developer path" error on running commands in the terminal after a...

Getting the value of an input element as a number without parseInt

Every once in a while, you come across something and you think, how did I not know this earlier? valueAsNumber is that thing...

Related Stories

Leave A Reply

Please enter your comment!
Please enter your name here

Hi there! Want some more knowledge?

Think that the knowledge shared is helpful? You might want to give our mailing list a try. We'll send you 2-4 emails a month, right when new posts come out.

Hi there! Want some more knowledge?

Think that the knowledge shared is helpful? You might want to give our mailing list a try. We'll send you 2-4 emails a month, right when new posts come out.