title: React vs Angular: Slow rendering with React
body: <p>I was doing a comparison of Angular and React and decided to try out a performance test to see how fast a large(ish) list would render in both frameworks.</p>
  
  <p>When I got done with my React prototype with some basic currency formating, it was taking ~2 seconds to render on my fast laptop. With Angular it was barely noticeable -- only when I switched to my phone did it have a noticeable lag.</p>
  
  <p>This was very surprising because I was told that React was supposed to beat the pants off of Angular for performance, but it appears that the opposite is true in this case.</p>
  
  <p>I distilled my prototype down to a very simple app to try to isolate the issue: <a href="https://github.com/pselden/react-render-test">https://github.com/pselden/react-render-test</a></p>
  
  <p>In this sample, it's taking almost 200ms to render this simple list after changing the language, and I'm barely doing anything.</p>
  
  <p>Am I doing something wrong here?</p>
  
  <pre><code>/** @jsx React.DOM */
  'use strict';
  
  var React = require('react'),
      Numbers = require('./Numbers');
  
  var numbers = []
  for(var i = 0; i &lt; 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 (
              &lt;div&gt;
                  &lt;select
                      onChange={this._onChangeLocale}&gt;
                      &lt;option value="en-US"&gt;English&lt;/option&gt;
                      &lt;option value="fr-FR"&gt;French&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;Numbers numbers={numbers} locales={[currentLocale]} /&gt;
              &lt;/div&gt;
          );
      }
  });
  
  module.exports = App;
  </code></pre>
  
  <pre><code>/** @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 &lt;li key={number}&gt;{number} - {self.formatNumber(number, {style: 'currency', currency: 'USD'})}&lt;/li&gt;
          });
  
          return &lt;ul&gt;{list}&lt;/ul&gt;;
      }
  });
  
  module.exports = Numbers;
  </code></pre>
  
  <p>PS: Added an angular version: <a href="https://github.com/pselden/angular-render-test">https://github.com/pselden/angular-render-test</a></p>
  
  <p>Edit: I opened an issue with react-intl and we investigated and found that there was not <em>that</em> much overhead with using <a href="https://github.com/yahoo/react-intl/issues/27">https://github.com/yahoo/react-intl/issues/27</a> -- it's simply React itself that is slower here.</p>