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

Chrome devtools: Using logpoints for logging messages directly

When it comes to debugging JavaScript in Chrome devtools, there are two different camps: the console.log fans and the debugger/breakpoint maximalist. I...

How to prevent npm install for unsupported Node.js versions

npm configurations allow us to do quite a lot of nifty things. One of them is to allow the project to set...

How to terminate a process on a port using the command line

Zombie processes are usually a pain to figure out. More often than not, I end up googling about how to terminate a...

Detecting dark mode preference using JavaScript

As dark themes have become popular across the web and across operating systems, we might want to check the user's operating system...

JavaScript: Split string and keep the separators

String.prototype.split() is a valuable method to split strings based on a delimiter. There often comes a scenario when we want to split...

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.