How does react.js update the virtual DOM?

How does react.js update the virtual DOM

Hello Guys! Today the question is how does react.js actually re-render the UI because of it really important that we do this right otherwise it will cost us a lot of performance. Now, what would be the worst case? the worst case would be that the whole dang gets rear-ended upon every state change in any component. Do you want to know difference between react vs angular vs vue?


So I click this button and boom everything gets rear-ended that would be very bad. Performancewise and fortunately that’s not the case react is actually uses a concept called virtual Dom which means it has a virtual representation of the actual Dom.

Why react.js created the virtual dom?

Now the actual Dom is something we can see in the developer tools here right. So that here that is the actual Dom created or rendered by the browser now the actual Dom unfortunately is really slow and accessingor rendering re-rendering the Dom is really slow.

So that is why react.js created this virtual Dom which is a Dom written in JavaScript. So, it basically took the whole Dom and wrote a representation of it in JavaScript the reason for that is that javascript is really fast whereas the URI actual Dom is really slow.

React is actually recreating virtual dom

So we have this virtual Dom which you can think of looks like the thing on the right here just in JavaScript code and again that makes sense. We in our render function also write JavaScript code just in a nice representation, so we get the virtual Dom and when I click that button what happens is react is actually kind of recreates the virtual dom a second time and it recreates in a way that would look like after this state change.

That’s why it recreates it and sees ok in the new Dom. In the new virtual Dom still, the actual Dom hasn’t been touched the age is now 75 then compares this new hold on to the old words hold on. And creates a difference has a look if there is some difference may be both dorms are equal.

Because maybe we changed the state but it doesn’t have any impact on the currently rendered components in this case it would see no changes okay I’m done finish actual done never gets touched.

But maybe it sees okay New Age is 75 old age was 72 I need to change itnow it still doesn’t rear end early hold on because of that changeinstead it will only rerender this part here only the part which getsaffected.

Of course is really fast because for one it uses the virtual doms for the comparison instead of the actual Dom which would have been slow to begin with. And then when it has to re-render something it only renders the part which changed and not everything.

We can actually see this if I go to my rendering tab here in the developer tools or here in your options and then more tools and then rendering settings you can enable paint flashing this means the browser will.

While these style changes react updates dom

Now show you whenever something the Dom updates and you see this if I reload for example everything flashed green because the hold on got updated and they hover over home it updates because while these style changes and now watch what happens when I click to make me older do you see that it only updates the row where the ages in and of course this button due to some styling stuff but it doesn’t update anything else.

Because the rest of this application is not changing there is no
need to update anything else. I can also show this by going back to my home component remember I have the status in my state too and then here in the constructor.

For example, I’ll add a timeout and I’ll set this to let’s say 3 seconds and after this time expired I want to basically just call this set state. And this time change the status to one like that.

So, if I save this you see that after three seconds this got highlighted and change I’m going to reload this and then click make me older age changed age changed state has changed each changed you see it updates only what it needs to update that is why react.js is really fast and how it manages the updating and re-rendering of your page and that is, of course, important to understand.