React w/ Props benchmark

by David Komer

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container"></div>
<p/>
The top number is the time between a parent's render() call and the child's componentWillReceiveProps().
<p/>
The bottom number is the total fps of a render cycle (max 60fps or whatever requestAnimationFrame() can handle)
<p/>

JavaScript 1.7

const withRenderLoop = WrappedComponent =>
  class extends React.Component {
    constructor(props) {
      super(props);
      this.renderCompleted = true;
    }

    componentDidMount() {
      const renderFrame = (frameNow) => {
        if (this.renderCompleted) {
          this.renderCompleted = false;

          this.setState({
            tick: frameNow
          });
        } else {
        	console.error("skipping frame! This shouldn't ever happen!!");
        }
        requestAnimationFrame(renderFrame);
      }
      requestAnimationFrame(renderFrame);
    }

    componentDidUpdate() {
      this.renderCompleted = true;
    }

    render() {
      return <WrappedComponent time = {performance.now()} {...this.state}/>;
    }
  }

class View extends React.Component {
  componentWillReceiveProps(nextProps) {
    this.setState({
    	fps: Math.round(1000/(nextProps.tick - this.props.tick)),
      timeDiff: performance.now() - nextProps.time
    });
  }

  render() {
    return this.state 
    	? <div> {this.state.timeDiff} <br/> {this.state.fps} fps</div> 
      : null;
  }
}
const Renderer = withRenderLoop(View);

ReactDOM.render( <Renderer /> ,
  document.getElementById('container')
);