Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What really makes ReactJS as fast as it claims to be?

I'm learning ReactJS and trying to understand what really makes it "faster" and more special than solutions provided by other frameworks and libraries.

I'm aware of following:

  1. Virtual DOM and how React runs a diff to take minimal # of steps to determine "change" and respond/re-render accordingly as opposed to traditional "dirty-checking" operation in other frameworks/libraries.
  2. Programmed more declaratively rather than imperatively achieved by "Observable" pattern.

So, the statements above sound all fine and dandy to me conceptually, however, i fail to picture the benefits when i consider real life use-cases and practices:

  1. Considering following with jQuery:

    $("#box").removeClass('red').addClass('blue');

How is it "slower" than doing the same thing the React way? The way i understand it, jQuery will directly grab 1 element from the DOM with the matching id value of "box" and remove and add class as instructed -- all specific to this element within the DOM. (Does it implement "dirty-checking" here to find #box?)

With ReactJS, it would make the same change in its Virtual DOM first (after doing a diff to find #box with minimal # of steps) and re-render the element to the actual DOM. So if anything, it's seems to be adding an extra step of comparing against VDOM.

  1. Observable pattern has been around forever. Why is it the first time it's applied on event-handling operation?.. to do something like:

"Hey, something changed here (event triggered)... so let's see what we're supposed to do about it (run everything bound to the event) and do it"

Any insight, pointers and examples would be greatly appreciated!

like image 856
Still Questioning Avatar asked Oct 26 '15 20:10

Still Questioning


2 Answers

You're probably right, in this case jQuery might be faster (I haven't tested). But consider this, why are you using jQuery - wouldn't it be even faster if you did

document.getElementById("MyID").className = document.getElementById("MyID").className.replace(/\bred\b/,'');
document.getElementById("MyID").className = document.getElementById("MyID").className + ' blue';

So really, we're not trying to compete raw speed here, otherwise you would just write in pure javascript and I know companies that do this purely to be faster on mobile.

The benefits of a framework is maintenance and speed of development. Programming in pure javascript is a lot harder to scale and maintain than jQuery and similarly programming in jQuery is a lot harder to scale and maintain than React. Although the converse is true, it's much faster to get a working app with minimal functionality with jQuery (but after you build your mvp, it becomes much harder to maintain)

In small codebases jQuery might be faster than React, but when you work with larger codebases, you'll find heaps of duplicate and redundant code in jQuery and it becomes inherently slower. React however, is different - first React, segregates everything into components so it becomes much easier to reuse, second React has a cool internal engine that prevents useless rendering from slowing down your app.

So yes you are right, jQuery can be faster than React but that's really missing the point of React. Just as pure javascript might be faster than jQuery, but that's missing the point of jQuery.

like image 123
yangli-io Avatar answered Oct 15 '22 15:10

yangli-io


React isn't exceptionally fast, it's fast enough. The real value of React is the declarative api it provides which lets you write better code.

Manual DOM operations have much higher potential performance, but you end up with difficult to maintain, hard to read code. This is unacceptable in large applications which is why we turn to tools like React.

Virtual DOM diffing is expensive. Usually, not expensive enough to cause you to drop frames. The difference between 1ms and 16ms for an update is nothing. All that matters is that you stay within the frame, which is why React's performance overhead is acceptable.

like image 28
Brigand Avatar answered Oct 15 '22 15:10

Brigand