DEV Community: Rakshit Soral

What Makes React SLOW, What makes React FAST

Rakshit Soral — Tue, 11 Sep 2018 14:22:50 +0000

How many times have you heard your developer colleagues screaming …. “React is fast but it often makes development slower”?

5, 10, 100 or maybe 1000 times! Right?

Well, I am not joking or ranting about the framework. I am here to tell you the TRUTH.

The truth that most developers found hard to AGREE upon.

The truth about DOM you need to know about

DOM manipulation is the heart of the so-called modern and interactive web development. Unfortunately, it’s very slow in carrying out the operations. Even MORE slower than typical Javascript operations.

The slowness which I am talking about is even made WORSE by the fact that most Javascript frameworks are known to update the DOM un-necessarily and more often than needed.

For an instance, let’s say you have an E-commerce application that showcases a list of ten items. You checked-off the first item and find out that the list has been REBUILT. Now, that’s 10 TIMES more work than necessary!

The Engineers at React found out a way to address this problem. They came up with something which is called as “Virtual DOM”.

Enters the Virtual DOM - React

In React, for every DOM, you have a corresponding object of VIRTUAL DOM which resembles like a lightweight copy of the original DOM object. Both DOM object and Virtual DOM object have similar properties with a smaller difference of capitalizing what to update.

Once the Virtual DOM gets updated by rendering the UI components, React compares the virtual DOM with a virtual DOM snapshot that was taken right before the update.

In this way, React evaluates which VIRTUAL DOM objects have changed. This process is called as “diffing”.

In the above example, React would be smart enough to analyze the changes and rebuild the first item thereby leaving aside the rest of the list alone.

This gives React a big SPEED Boost as React only updates the necessary parts of the DOM.

The DIRTY Parts about React’s Virtual DOM

Manipulating the DOM in Javascript is slow, Manipulating the virtual DOM in React is even more faster. This is something which even React community will agree. Now, let's discuss the fact which makes Optimizing React difficult.

Whenever you call setState on a React component, React will mark it as dirty. At the time of ending event loop, React will look at these dirty components and re-render them. This happens exactly ONE time when the DOM is being updated.

Upon calling of SetState, React rebuilds the virtual DOM for all the child components. But the problem would be if you re-render root element, you will end up rendering the whole app which is hard to optimize.

Thankfully, there are TONS of optimization techniques that can make your React app faster. There is this definitive guide on making a React app FASTER which goes into details on optimizing the React components.

As a Chief tech fella (say CTO), what tech-stack would you like to choose for your project and what are the exact reasons?

Rakshit Soral — Wed, 20 Jun 2018 12:02:39 +0000

Imagine a situation where you're in charge of a high-end project as a chief tech fella. Among usual technologies which ones would you choose And in what circumstances? Where would you pick Java (JVM family), Python/Ruby or Node.js and PHP? And other scenarios where you'd take other paths.

What will happen to React and React Native #deleteFacebook?

Rakshit Soral — Tue, 27 Mar 2018 13:46:07 +0000

As Cambridge Analytica news broke through, outraging millions of people and churning #deleteFacebook campaign. Personally, there’s a lot to dislike about what happened there. But, I am not here to talk about that.

I don’t know why in our dev community people are talking about the doom of React and React Native if Facebook dies. Some are even leveraging this opportunity to say “Hey! Don’t use React native. It will die now with Facebook”.

Let’s consider that even if 1% of people even deleted their Facebook accounts, #deleteFacebook would be a huge campaign. Set that aside, check out this talk from Orta. Orta says that they will continue to support React native even if Facebook drops it. Given everything, it is highly unlikely that Facebook would go down, and behemoths of Silicon Valley like Airbnb and Dropbox would still fund/contribute towards evolution and development of React native in one way or another.

Just some thoughts on the status quo and the BS that spreads around :)