No. Hard to believe?

Most developers and decision-makers take it for granted that ReactJS offers high performance and incredible speed much better than other frameworks like AngularJS and EmberJS.

It has gotten to the point that no one even questions things like this:

(Source)

But if you ask yourself where this belief comes from, you might be surprised.

Everyone says it

This doesn't give us much to argue to with, so we won't bother.

Virtual DOM

We all understand that DOM manipulation by the browser is slow.

This is where ReactJS came in and introduced the new idea of using a Virtual DOM. By calculating the difference between the future state and the current one, it can minimize the amount of DOM requests.

Intuitively, this sounds like a major performance improvement. But what about the performance impact caused by the massive amounts of JavaScript required to execute this complicated feat?

Or the strange lack of any demonstrable examples of the performance improvements achieved by this feature... except the comparison demos.

We have all seen the demos

This is perhaps the biggest culprit. So let us take a closer look at a few.

React.js Conf 2015 - Hype!

This is perhaps the most watched one. This presentation literally made the crowd go "wow".

Here is the original demo:

• AngularJS
• ReactJS

Wow, right?

Let's not take it at face value though. If we give it a closer look we find something very surprising. The demo's author seems to neglect one of the most basic speed improvements that can be effected in Angular - "track by".

Let's fix that by changing a single line of code:

ng-repeat="(key, db) in databases"

to:

ng-repeat="(key, db) in databases track by key"

Try the result

Surprised? Sadly, AngularJS deserves some blame for that. The most common speed improvement is unfortunately badly documented and not auto-suggested by the framework.

This little change invalidates 95% of comparisons between ReactJS and AngularJS.

Next up: ng-conf: Angular + React

The next most popular presentation contains a similar "wow" moment.

Try it out

Here the issue is different. The comparison is not between rendering but rather between rendering ReactJS Components and rendering and data handling of AngularJS.

ReactJS is being told explicitly which cell changed while AngularJS is left with a generic "something changed" notification - forcing it to recheck everything.

Let's level the playing field and give both frameworks the same information by using AngularJS's isolated scope:

$timeout(function() {
  $scope.status.isSearching = false;
  $scope.status.searchResults = ...

Updated to:

setTimeout(function() {
  $scope.status.isSearching = false;
  $scope.status.searchResults = ...
  $scope.$digest();

The result? Try it out.

The above can be done on newer versions of angular by using $timeout([func], [timeout], false);

What does all this mean?

It appears that Virtual DOM-based frameworks (and, specifically, ReactJS) offer no demonstrable improvement over "plain" frameworks like AngularJS or EmberJS. The premise that adding ReactJS to AngularJS will magically improve performance is simply not based on factual data.

And while React itself offers a host of other improvements, I could not find any demonstration of the most commonly quoted advantage of speed.

Is React Bad?

No. React is a great framework which we at 500Tech use and love. There are many benefits to choosing ReactJS for your next project. "Speed" should not be one of them.

Notes

• Any demonstrations that show speed boosts resulting from the Virtual DOM are most welcome.
• Please do your AngularJS performance homework before sending them over.
• Original presentation for ng-conf Israel
• Since "fast" is a relative term, AngularJS was used as the comparison base. Both because it solves similar problems as ReactJS and both since it is usually used as the base comparison anyway.
• While its easy to show that ReactJS is faster than AngularJS in certain cases, it is much harder to show that it is always slower. Over the next week we will release the various samples we wrote to test the speed differences.
• Thanks Yoni Weisbrod for proof-reading the post.

Updates

26-May-2015:

• People have sent me links to a number of other demos. All are simply missing 'track by'.

In theory there is no difference between theory and practice. In practice there is.

Comments

Discussion on HackerNews