React Stack Reconciliation

It’s been more than six years since React Team released version 16. But if you are still using React older versions (older than v16) you are missing a lot of features that came out with v16 and later versions.

In context of this, you have to be cautious with this in two scenarios.

Your React version of the project.
Your dependencies’ React version (which was backed by React).

The first one is about your project’s react version. You can simply check it by checking your package.json file. If you are still using react versions older than v16 in your maintaining project you should switch to at least version 16. Also if you have a react project, which is not in maintaining status, but if your users are still using it you should consider upgrading it to at least version v16. We will see why you should do this in the later part of the article.

If you are using React for your web or mobile application you probably using third-party packages. In that case, you can’t be relieved by just checking and confirming your project's React version. Because you may have unmaintained dependencies in your project and they may still use older react versions than v16.

How can I check my dependencies' react version?

You can check this via the npm package directory website. For example,

Go to the third-party npm package web page and the “Dependencies” tab.
Look for the “react” package name in the list. If you can find it in the list, then you have to verify its react version.

3. Now you have to go to the GitHub repo of that package and check the React version in the package.json file just like you did in your project.

Why should you care about the React version?

Because Performance matters!

A good project (be it your project or dependency) will use the latest versions of dependencies. Because always with the latest versions performance and security will be increased compared to older ones.

Everyone knows that React v16 comes with a special new rewrite of the rendering algorithm. And that the newer algorithm addressed many performance concerns in previous rendering algorithms suffered. Now we are going to look at those.

As you are aware React doesn’t do direct updates to runtime browser DOM, rather it do updates to virtual DOM, and then at the end, it updates real DOM.

Though it is before or after v16, this simplified definition (update between virtual and real DOM) is known as “Reconciliation” in the React world. If you are new and want a quick idea about virtual and real DOM, no worries you can catch up on it here.

The main difference between before and after v16 is held here. Let’s look at how it did in older versions by going back to the era before v16.

Before v16, This reconciliation was specifically known as “Stack Reconciliation”. Why did it get the “Stack” prefix?
Whenever we perform an action in the react application that causes state/prop change. This will schedule works and this set of scheduled works will be pushed to a linear data structure where it has LIFO (Last In First Out) behaviors. Then reconcile will take it and do the work and finally update real DOM.

Because of this linear data structure nature of scheduled work, the reconciler has to work in a continuous order. This means it can’t defer or pause for another important/prioritized work in the stack. Or even older versions don’t give us a way to hijack this order.

It’s worth understanding some additional concepts in the React world, so you can understand 1st and 2nd part of this article better.

Now you know the purpose of virtual DOM in React and how it updates real DOM. It’s time to learn about the “New version of Virtual DOM”. Even though React uses virtual DOM to update real DOM rather than doing updates on real DOM, behind the scenes React has two versions of virtual DOMs. React does the comparison old and new virtual DOMs with the help of another algorithm known as the “Diffing Algorithm”.

“Batching” is part of the reconciliation process where it combines multiple virtual DOM updates to a single update and does one real DOM update. This doesn’t mean we’re going to miss any frames (one instance of consecutive images appearing on display at a given time—frame rate). It’s about combining a set of frames that were made while updating the same state/prop value.

Let’s hop into another important concept of “Frame Rate” since we come across it above. Frame rate is the frequency of images appearing on display and shows in frames per second (FPS) unit. Typically video is played at 24FPS — 30FPS, so the human eye can see playing video. Higher FPS gives a better experience. If we think about using the React application on the latest displays gives 60FPS [(1/60)*1000 = 16.67ms], which means a new frame is displayed for each 16ms.

Now we’ll see an example, where we have seen frame drops at day today react development process. Ever noticed typing a value in input and rather than showing whatever we’re typing with syncing to our typing speed giving lag and showing multiple sets of characters inside input? If so, you’ve experienced this. This is very common when you have chained multiple useEffects. Because the reconciliation algorithm is going to drop some DOM tree traverses. Sometimes it’s not a problem, but when you are dealing with smoothing animations you will see it as critical.

When React released v16 in 2017 Sep, they included a new reconciliation algorithm that completely replaced the legacy “Stack Reconcile” algorithm. This new reconciliation algorithm gives us better performance than before. Since now you have an idea about how the old reconciler worked, you should consider updating your project, project dependencies, or replacing updated dependencies if you are looking into performance improvement of your project apart from refactoring code. By doing that you can,

Address UX's slower responsiveness of expensive calculations.
Prioritize state updates.

Now we can wrap up the studied React flow into the below diagram to visualize what we learned so far.

Next, let’s look at what’s new in the new reconciliation algorithm in 2nd (last) part of the article.

React Stack Reconciliation was originally published in Mastering Software Dev on Medium, where people are continuing the conversation by highlighting and responding to this story.