React.js: javascript vs reactjs DOM manipulations

Question

I am new to React.js. I am trying to quantify the time html document takes to render fully. Somebody please tell me where my approach is wrong, I find the results are not comparable at all.

Using React

var UList = React.createClass({
  setText: function(){
    var updatedItems = this.state.items;
    var item = Math.abs(Math.random().toString().split('')
    .reduce(function(p,c){return (p<<5)-p+c})).toString(36).substr(0,11);;

    updatedItems.push(item);
    this.setState({items: updatedItems});
  },
  getInitialState: function(){
     return {
       items: []
     }
  },
  render: function(){
    return (    
     <div id='component'>
        <button id='bb' type="button" onClick={this.setText}>Set</button>      
        <List items={this.state.items}/>
     </div>
    );
  }
});

var List = React.createClass({
  render: function(){    
    return (
      <ul>
      {
        this.props.items.map(function(item) {
          return <li key={item}>{item}</li>
        })
      }
      </ul>
    )  
  }
});
ReactDOM.render(<UList text="kiran"/>, document.getElementById('container'));

console.log(new Date());

for(var i=0;i<1000;i++)
  document.getElementById("bb").click();


console.log(new Date());

Using Javascript

  setText = function(){
    var item = Math.abs(Math.random().toString().split('')
    .reduce(function(p,c){return (p<<5)-p+c})).toString(36).substr(0,11);

    var node = document.createElement("LI");
    var textnode = document.createTextNode(item);
    node.appendChild(textnode);
    document.getElementById("myList").appendChild(node);
  };

  console.log(new Date());

  for(var i=0;i<1000;i++)
    document.getElementById("bb").click();

  console.log(new Date());

Answer 1

In this particular case, react may be slower overall in processing the 1000 clicks. What you are in essence measuring is more or less cycle time between 1 click and 1 update. In your one-to-one comparison direct javascript DOM updates are likely to be faster (maybe directly rendering HTML from server would be even faster). Some notes:

• Cycle time is not the only factor in comparing performance: when doing DOM updates, react in many cases leaves more CPU time available for the user, eg to scrolling while react is updating. This in not measured by your test.

• Where react really shines is in doing updates: if you delete, update, add many different items in the list of 1000, react is likely to be much faster than the pure-javascript variant.

UPDATE: One of the key reasons for facebook to build react is because typical DOM updates are really slow. So react minimizes DOM updates, through its diff engine.

If you want to know more about performance, look here for comparison of react vs angular vs knockout.

This video from an angular conference made me aware that there is much more to performance than cycle time: how different processes behave during one cycle has important implications as well.

A sample test version (nice and clean) Rich Ayotte here , compares react also with raw javascript. It shows that raw javascript is actually faster than react (in rendering a long list).

The bottomline:

• for small and simple applications, raw is probably faster
• but if you want to maintain performance also if your application grows bigger and more complex, react is a safe bet.