medium-profiler-post-code-2.js

import React, { Component, unstable_Profiler as Profiler } from "react";
import { render } from "react-dom";

class ComponentWithProfiling extends Component {
  state = {
    count: 0
  };

  logProfile = (id, phase, actualTime, baseTime, startTime, commitTime) => {
    console.log(`${id}'s ${phase} phase:`);
    console.log(`Actual time: ${actualTime}`);
    console.log(`Base time: ${baseTime}`);
    console.log(`Start time: ${startTime}`);
    console.log(`Commit time: ${commitTime}`);
  };

  go = direction => () =>
    this.setState(({ count }) => ({
      count: direction === "up" ? count + 1 : count - 1
    }));
  render() {
    return (
      <div>
        <Profiler id="app" onRender={this.logProfile}>
          <button onClick={this.go("up")}>☝️</button>
          <div>The count is {this.state.count}</div>
          <button onClick={this.go("down")}>👇</button>
        </Profiler>
      </div>
    );
  }
}

render(<ComponentWithProfiling />, document.getElementById("root"));