The last time Hackerfall tried to access this page, it returned a not found error. A cached version of the page is below, or click here to continue anyway

Is React Faster Than AngularJS? 500Tech on LinkedIn 500Tech on Facebook 500Tech on Twitter 500Tech on GitHub 500Tech on Instagram 500Tech on YouTube

Jun 1, 2015  

No. Hard tobelieve?

Most developers anddecision-makers take it forgranted that ReactJS offers high performance andincredible speed much better than other frameworks like AngularJS andEmberJS.

It has gotten tothepoint that noone even questions things like this:

(Source)

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

Everyone says it

This doesnt give us much toargue towith, so we wont bother.

Virtual DOM

We all understand that DOM manipulation bythebrowser is slow.

This is where ReactJS came inandintroduced thenew idea ofusing aVirtual DOM. Bycalculating thedifference between thefuture state andthecurrent one, it can minimize theamount ofDOM requests.

Intuitively, this sounds like amajor performance improvement. Butwhat about theperformance impact caused bythemassive amounts ofJavaScript required toexecute this complicated feat?

Orthestrange lack ofany demonstrable examples oftheperformance improvements achieved bythis feature... except thecomparison demos.

We have all seen thedemos

This is perhaps thebiggest culprit. So let us take acloser look atafew.

React.js Conf 2015 Hype!

This is perhaps themost watched one. This presentation literally made thecrowd go wow.

Here is theoriginal demo:

Wow, right?

Lets nottake it atface value though. If we give it acloser look we find something very surprising. Thedemos author seems toneglect one ofthemost basic speed improvements that can be effected inAngular track by.

Lets fix that bychanging asingle line ofcode:

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

to:

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

Try theresult

Surprised? Sadly, AngularJS deserves some blame forthat. Themost common speed improvement is unfortunately badly documented andnotauto-suggested bytheframework.

This little change invalidates 95% ofcomparisons between ReactJS andAngularJS.

Next up: ng-conf: Angular + React

Thenext most popular presentation contains asimilar wow moment.

Try it out

Here theissue is different. Thecomparison is notbetween rendering butrather between rendering ReactJS Components andrendering anddata handling ofAngularJS.

ReactJS is being told explicitly which cell changed while AngularJS is left with ageneric something changed notification forcing it torecheck everything.

Lets level theplaying field andgive both frameworks thesame information byusing AngularJSs isolated scope:

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

Updated to:

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

Theresult? Try it out.

Theabove can be done onnewer versions ofangular byusing $timeout([func], [timeout], false);

What does all this mean?

It appears that Virtual DOM-based frameworks (and, specifically, ReactJS) offer nodemonstrable improvement over plain frameworks like AngularJS orEmberJS. Thepremise that adding ReactJS toAngularJS will magically improve performance is simply notbased onfactual data.

Andwhile React itself offers ahost ofother improvements, I could notfind any demonstration ofthemost commonly quoted advantage ofspeed.

Is React Bad?

No. React is agreat framework which we at500Tech use andlove. There are many benefits tochoosing ReactJS foryour next project. Speed should notbe one ofthem.

Notes

Updates

26-May-2015:

Intheory there is nodifference between theory andpractice. Inpractice there is.

Comments

Discussion onHackerNews

Continue reading on blog.500tech.com