PerfProfiler.original.js

import React from 'react'
import Perf from 'react-addons-perf'
import styles from './styles.css'

export default class PerfProfiler extends React.PureComponent {
  constructor (props) {
    super(props)
    this.state = {started: false}
  }

  toggle = () => {
    const {started} = this.state
    started ? Perf.stop() : Perf.start()
    this.setState({started: !started})
  }

  printWasted = () => {
    const lastMeasurements = Perf.getLastMeasurements()
    Perf.printWasted(lastMeasurements)
  }

  printOperations = () => {
    const lastMeasurements = Perf.getLastMeasurements()
    Perf.printOperations(lastMeasurements)
  }

  render () {
    const {started} = this.state
    return (
      <div className={styles.perfProfiler}>
        <button onClick={this.toggle}>{started ? 'Stop' : 'Start'}</button>
        <button onClick={this.printWasted}>Print Wasted</button>
        <button onClick={this.printOperations}>Print Operations</button>
      </div>
    )
  }
}

PerfProfiler.styled.js

import React from 'react'
import Perf from 'react-addons-perf'
import styled from 'styled-components'

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 20px;
  padding: 10px;
  background: #fff;
  border: 0.1px solid #000;
  text-align: center;
`

const Heading = styled.div`
  font-size: 1.5em;
`

const Button = styled.button`
  border: none;
  color: #fff;
  display: block;
  margin-top: 10px;
  padding: 5px;
  background:#5cb85c;
`

export default class PerfProfiler extends React.PureComponent {
  constructor (props) {
    super(props)
    this.state = {started: false}
  }

  toggle = () => {
    const {started} = this.state
    started ? Perf.stop() : Perf.start()
    this.setState({started: !started})
  }

  printWasted = () => {
    const lastMeasurements = Perf.getLastMeasurements()
    Perf.printWasted(lastMeasurements)
  }

  printOperations = () => {
    const lastMeasurements = Perf.getLastMeasurements()
    Perf.printOperations(lastMeasurements)
  }

  render () {
    const {started} = this.state
    return (
      <Wrapper>
        <Heading>Perf Profiler</Heading>
        <Button onClick={this.toggle}>{started ? 'Stop' : 'Start'}</Button>
        <Button onClick={this.printWasted}>Print Wasted</Button>
        <Button onClick={this.printOperations}>Print Operations</Button>
      </Wrapper>
    )
  }
}