React vs Angular: slow rendering with reaction

Question

I did a comparison of Angular and React and decided to try a performance test to see how quickly the large (ish) list would display in both frames.

When I finished my React prototype with some basic currency formation, it took ~ 2 seconds for my fast laptop. With Angular, this was barely noticeable - only when I switched to my phone did it have a noticeable lag.

This was very surprising because I was told that React should have recaptured Angular's pants for performance, but it seems to be true in this case.

I pushed the prototype into a very simple application to try to isolate the problem: https://github.com/pselden/react-render-test

In this example, it takes almost 200 ms to display this simple list after changing the language, and I am not doing anything.

Am I doing something wrong here?

/** @jsx React.DOM */ 'use strict'; var React = require('react'), Numbers = require('./Numbers'); var numbers = [] for(var i = 0; i < 2000; ++i){ numbers.push(i); } var App = React.createClass({ getInitialState: function() { return { locale: 'en-US' }; }, _onChangeLocale: function(event) { this.setState({locale: event.target.value}); }, render: function() { var currentLocale = this.state.locale; return ( <div> <select onChange={this._onChangeLocale}> <option value="en-US">English</option> <option value="fr-FR">French</option> </select> <Numbers numbers={numbers} locales={[currentLocale]} /> </div> ); } }); module.exports = App; 

 /** @jsx React.DOM */ 'use strict'; var React = require('react'), ReactIntlMixin = require('react-intl'); var Numbers = React.createClass({ mixins: [ReactIntlMixin], getInitialState: function() { return { numbers: this.props.numbers }; }, render: function() { var self = this; var list = this.state.numbers.map(function(number){ return <li key={number}>{number} - {self.formatNumber(number, {style: 'currency', currency: 'USD'})}</li> }); return <ul>{list}</ul>; } }); module.exports = Numbers; 

PS: Added Angular version: https://github.com/pselden/angular-render-test

Edit: I discovered the problem with an intl reaction, and we researched and found that there wasn’t too much overhead with https://github.com/yahoo/react-intl/issues/27 - it just Responds to itself that here is slower.

Answer 1

This is definitely an interesting test case.

If you look at the timelines, you will see that Angular completed processing the change event in just 20 ms. The rest of the time is spent in layout and repainting.

The reaction (using the production assembly, your repository uses dev by default) takes about 59 ms. Again, the rest of the time is spent on layout and repainting.

If you look at the processor flame graphs, you will see that Angular seems to do a lot less work.

Angular:

React:

React provides a pretty good optimization hook in the form of shouldComponentUpdate which is especially useful when one instance of a component from thousands should be updated, and the rest should remain the same; this is the technique that I use in this demo (try incognito in the window; I found that some Chrome extensions significantly increase the layout / redraw time - for me, adding / removing individual elements after a list with a length of 1000 takes ~ 13 ms, resizing / item color takes ~ 1 ms). However, it is not good when each item needs to be updated.

I assume that Angular will be faster at changing most or all of the elements in your table, and React will be proficient enough at updating selection records when using shouldComponentUpdate .

Answer 2

I am surprised that no one mentioned PureRenderMixin . It implements shouldComponentUpdate , so you don't need to worry about that.

Also, I wonder if the React Performance Tools will be of any use?

And I'm surprised to hear that Angular is faster than React after watching this conversation from Ryan Florence .

Answer 3

We tried to analyze some of the attributes of our frameworks, of course, this is not the whole list. Below is a table of consolidated and important, in our opinion, comparison of attributes.

Allows you to get more detailed information:

Although there are many differences between Angular vs React, they can do the same thing, namely build a client interface. Both have their place. For those people who like web development, AngularJS's innovative HTML approach is especially interesting.

AngularJS really is a complete framework, not just a library like ReactJS, but ReactJS has better performance than AngularJS by implementing a virtual DOM. In our opinion, you should use AngularJS if:

• you plan to conduct a lot of unit tests during development,
• you need a complete solution for your application.

However, two-way data binding is often taken advantage of using AngularJS, but since it is implemented through a series of digests, adding too much complexity for certain functions and expressions can degrade the performance of your applications.

Answer 4

In this particular case, you need to know that the state is flowing down as well as updating the DOM. What you want to do is create a Price component that saves the locale in its own state and receives a signal (i.e. Channel or stream) to change the locale, rather than send the language support all the way down. The idea is that you do not need to update the entire Numbers component, only the prices are inside. A component might look like this:

 var Price = React.createClass({ mixins: [ReactIntlMixin], componentDidMount: function() { subscribeToLocal(this.onLocaleChange); }, onLocaleChange: function(newLocales) { this.setState({locales: newLocales}); }, render: function() { return <span>this.formatNumber(this.props.number, this.state.locales, {style: 'currency', currency: 'USD'})</span> } }); 

Answer 5

In the React component, as soon as you call setState, it will immediately call the rendering function. React will mark this component as dirty and will re-render all children within this component.

It will not display all the Native DOM elements due to the virtual DOM, so it will still create new instances of its child ReactElements, which may result in additional Javascript memory cost.

To avoid this problem, you need the mustComponentUpdate function, which is implemented in the component class. it will be executed before the Render method. If you find that nothing has changed now, for example, in your example, you change state.locale. You may definitely think that this component does not need to be updated. so just return false to prevent the call from rendering.

This is a basic solution to solve React performance issues. Try adding “shoudlComponentUpdate” to your Numbers Component to avoid the subtleties of re-rendering elements.

Answer 6

This is an example where everything that changes is one data output. It is possible that Angular two-way data binding simply offers faster re-rendering when all that changes is the display of related data.

The reaction does not promise that its rendering is faster than any other structure under any circumstances. What he offers is the ability to handle ~ randomly complex DOM updates very efficiently and offer various lifecycle methods (e.g. componentWillReceiveProps, componentDidUpdate, in addition to the above shouldComponentUpdate) so that you can trigger callbacks of these events and control how and if they should happen. There is very little to optimize, because all you do is change 2000 text displays.

edit: To clarify, React is useful in performing more complex DOM manipulations, as it has a virtual DOM algorithm that allows it to select the minimum set of DOM operations needed to update your DOM. This is still a lot of work when all that needs to happen is 2000 copies of some text changes.

Answer 7

Which do you prefer to use Angular, Vue.js, Node.js or React? It all depends on the characteristics of the project that you are developing.

When is Angular rather than React or Vue a good choice?

In case you have in-depth knowledge of TypeScript, with a solid foundation in object-oriented programming (OOP). In developing robust and well-structured applications.

When is it advisable to use React instead of Angular or Vue?

Recommended when you have basic TypeScript knowledge. You want to create great flexible applications. React provides a large number of packages for various purposes and easily integrates with other libraries.

When is it suggested to choose Vue over Angular or React?

Vue is a great choice for projects or small programming groups. Its learning curve is much easier for those who are starting.

These two articles show comprehensive benchmarking in terms of:

Comparison between React, Angular, and Vue - Part I

Comparison between React, Angular, and Vue - Part II

Answer 8

Thank you all for participating. React vs Angular is the most pressing issue at the moment.

Answer 9

In my opinion, it depends on the business logic, as well as on the requirements of the client

1. Angular can easily stand alone, it can easily provide an e2e business solution compared to React
2. Rendering the React component is faster than Angular, but both of them consist only of Javascript.
   3. Angular is the Framework, and React is the library. For more information, follow this link: https://webwars.home.blog/