ReactJS vs AngularJS performance

Question

I am evaluating react.js and seems like it is quite slow compared to angular.js

Here is a problem with 1000 input fields with React:

var Message = React.createClass({
    render: function () {
        return this.transferPropsTo(
            <input type="text" value={this.props.text} onChange={this.props.callback}/>)
    }
});

var MessagesApp = React.createClass({
    getInitialState: function () {
        return { text: "hello"}
    },
    textChange: function (event) {
        this.setState({text: event.target.value})
    },
    createDom: function () {
        var dom = []
        for (var i = 0; i < 1000; i++) {
            dom.push(<li>
                <Message key={i} text={this.state.text} callback={this.textChange} />
            </li>)
        }
        return dom
    },
    render: function () {
        return (<ul>
               {this.createDom()}
        </ul>)
    }
});


React.renderComponent(<MessagesApp/>, document.body);

Here is same with AngularJS:

And this one with Backbone + React:

Is there some way to improve React performance?

You could probably construct an example to make any framework seem slow. Is rendering 1000 input fields a case your app actually needs? If you have an app and can identify real performance problems, define shouldComponentUpdate in your components to prevent unneeded rendering. — Ross Allen
– Ross Allen, Commented May 6, 2014 at 18:22
This is not a real scenario of updating 1000 inputs at once. I am looking for fast framework for next project and got impression that react would be much faster than competitors. I would really like to give react.js a shot but now I think it is going to be Backbone+Marionette or Angular. — zzz
– zzz, Commented May 8, 2014 at 11:33
You're judging React's performance on an example that you won't use in your real app. Since React handles all DOM operations, it will often be more efficient than handling rendering yourself. I suggest trying an example of a real app and judging performance based on an example that more closely resembles what your next project will actually be doing rather than this tightly-scoped rendering example. — Ross Allen
– Ross Allen, Commented May 8, 2014 at 18:27

Edgar · Accepted Answer · 2019-08-16 06:42:35Z

13

On my machine using Chrome 35, these two examples perform on par with each other -- using the Timeline view, both the React and Angular examples you have take ~110 ms to respond to a key press. The Backbone one takes over twice as long at ~270 ms.

Note also that when benchmarking (and in production apps), you should use the pre-minified version of React. More info here:Getting Started

The development version has extra warnings to help you find problems in your code -- the production version has these stripped and is consequently a bit faster.

edited Aug 16, 2019 at 6:42

Edgar

7,02811 gold badges38 silver badges75 bronze badges

answered May 6, 2014 at 16:56

Sophie Alpert

144k37 gold badges229 silver badges244 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AlexG Over a year ago

Yep, can't see any problem with React here... There are many with the Backbone one though (the usual suspects: Losing the caret, etc)

domokun · Accepted Answer · 2015-07-21 14:57:15Z

It's more than a year now, but the performance war is still raging...

You cannot benchmark an entire framework by how it renders 1000 input. I can't think of a single use case for that.
There's plenty of real benchmarks out there, just Google it, read a few of them and then see if they apply to your use case.

Do we only care about performances?
I'd like to point out though that the main benefit I've experienced in using React is what we now call "Developer eXperience", or DX.

Writing code in React is much easier than most other frameworks or library I've used, with no predefined convention or "alterations" of HTML or JS.

E.g.
<div ngIf={shouldRender}>whatever</div>
vs.
{shouldRender? <div>whatever</div> : null}

The lifecycle comes naturally, just by reading it (componentWillMount, DidMount, willUnmount, etc, etc...) and that's something that I've found very confusing in Angular.
Knowing what is going on in your code at a certain point in time, makes it easy to understand and maintain over time (and over different developers).

For these (and more) reasons, I will gladly trade a few ms in performance, if needed.

PrzeoR · Accepted Answer · 2015-10-23 15:31:33Z

0

You say that you are evaluating the React vs Angular. I would consider not only how fast is ReactJS vs Angular, but also other advantages & disadvantages - very informative article for people who are looking for more facts/research: https://www.quora.com/Is-React-killing-Angular

Maybe this Quora article may be useful resource for other folks who are evaluating react and angular for their next project.

Btw. from my ReactJS experience, in the above comparison's example there is missing shouldComponentUpdate which very often can improve ReactJS performance and so on. You should refactor React example if you consider this test case of rendering 1000 inputs.

answered Oct 23, 2015 at 15:31

PrzeoR

7557 silver badges8 bronze badges

Collectives™ on Stack Overflow

ReactJS vs AngularJS performance

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related