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 paring against VDOM.

2. 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!

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 paring against VDOM.

2. 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!

• javascript
• performance
• reactjs

• jQuery is not pure javascript, it has a stack of validations to get through before it will change the DOM and you don't know the method it chooses to make the change is the fastest for that browser or that situation. You cannot pare a library with a View ponent. Ideally you should pare ReactJS to pure javascript which is something people seem to think jQuery is but in actuality it is a general all purpose DOM library with nice additions like animations. – GGJ Commented Oct 26, 2015 at 20:43
• @GGJ - I was paring more on the operation side of things.. and how ReactJS is really faster when you think about such operations; particularly the example i bring up in my question -- and not necessarily against jQuery itself. I'm well aware that jQuery is not a pure Javascript and it's meant to be more of a wrapper that standardizes inconsistencies produced by different browsers..in addition to other things like animation etc.. – Still Questioning Commented Oct 26, 2015 at 20:57
• Okay I'll give you an example. By storing the state of what the DOM is in react it can change what has changed in the most efficient way possible. When you ask jQuery to do something it checks everything and is coded to do something the safest way. Adding a class to an element is faster if you write every class in one write, react could do this as it maintains a copy of what classes already there, jQuery cannot as it does not know, it would have to find out the others and create the full string and write back. Or call the slower DOM add class function part of classList. – GGJ Commented Oct 26, 2015 at 21:03
• This might show you why knowing what class changes are to be made is faster than having to call classList.add/remove; jsperf./setattribute-class-vs-classlist-add and jsperf./add-class-test – GGJ Commented Oct 26, 2015 at 21:07
• @GGJ - Soo, in a nutshell, every time when i write series of statements as simple as adding and removing class, most traditional solutions including the pure JS way, are "dirty checking" the actual DOM for each statement and responds accordingly. ReactJS, on the other hand, keeps a copy of the DOM and approaches the "checking" part differently and efficiently? – Still Questioning Commented Oct 26, 2015 at 21:29

3 Answers 3

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 pete raw speed here, otherwise you would just write in pure javascript and I know panies 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 bees 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 bees inherently slower. React however, is different - first React, segregates everything into ponents so it bees 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.

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.

React.js is not fast. Before React.js, Angular.js was popular. Angular is uber-slow because of the large code base that needs to be downloaded before execution. So pared to Angular.js, it is faster. But in reality, you should avoid React.js in any e-merce, blog, or pany website which needs faster load times.

Moreover, many developers don't know how to test the speed of the application. Actually, the speed means load times in web applications. In other words, the time needed for the application to be ready to work. But most of React.js will tell about virtual dom's performance gains, which means code execution speed. I wrote a TypeScript library which has similar methods to jQuery, and it has a faster execution time pared to jQuery. But in reality, no human can detect speed differences in code execution as those are happening at the nanosecond level. But web application load time happens at a millisecond level, so that is much more important.

Moreover, 99.99% of web applications may not get the benefit of execution speed improvements of React.js (if there are any), and maybe only web-based games or very plex real-time financial applications get the benefit of it. So I never saw any speed tests related to the load time of web applications built by React.js or Angular.js, rather everybody is claiming it is faster because of virtual DOM and ponent-based design.

React.js is very popular now, and if you are a front-end developer, you may not find a job without React.js knowledge.

If are ready to get enlightened, I wrote a short review about it here which includes speed tests done via industry standard tools GTMetrix and Google's Page Speed: https://selimkoc./short-speed-review-for-react-js-next-js-headless-e-merce/

Lastly, 99% of web applications are not plex applications. If you are building something really plex like Figma or that kind of software which works on a browser, there are alternative tools for faster execution, look at WebAssembly.

You can still use React.js for projects whose first load time is not that important like SaaS, Admin Panels, and Games. If you are building a SaaS, build your website (a customer-facing website which has content about your SaaS) with something faster and better SEO support and you can still use React.js for your custom app. Use next.js only if you are hopeless :) [I mean your CTO, or CEO made a final decision to use it]