ES5 React HOC for performance benchmarking using the React addon 'Perf'

withPerf-es5.js

// Pre-requisites
// ```````````````
// npm i react --save
// npm i react-addons-perf --save-dev
// 
//
// Plain render usage
// ```````````````````
// const YourPerfComponent = withPerf(YourComponent)
// React.render(React.createElement(YourPerfComponent, props, children), ...)
// 
//
// React Router
// `````````````
// <Router history='...'>
//   <Router path='/' component={withPerf(YourComponent)}/>
// </Router>
var React = require('react');
var Perf = require('react-addons-perf');


var withPerf = function (Component) {
  var displayName = 'withPerf(' + Component.displayName +')';
  
  return React.createClass({
    displayName: displayName,
    
    componentWillMount: function () {
      console.log("Mounting:", displayName);
      Perf.start();
    },

    componentDidMount: function () {
      console.log("Mounted:", displayName);
      Perf.stop();
      Perf.printInclusive();
      Perf.printWasted();
    },

    componentWillUpdate: function () {
      console.log("Updating:", displayName);
      Perf.start();
    },

    componentDidUpdate: function () {
      console.log("Updated:", displayName);
      Perf.stop();
      Perf.printInclusive();
      Perf.printWasted();
    },

    render: function () {
      return React.createElement(Component, this.props);
    }
  });
};