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?

Answer 1

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.

Answer 2

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.

Answer 3

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.