ReactJS vs AngularJS performance

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

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.

Leave a Reply

Your email address will not be published. Required fields are marked *