Using React’s Perf with react-addons-perf

Benchmark your React component or see performance problems in your React apps by using react-addons-perf.

Setup

In your console, run

npm install --save-dev react-addons-perf

then import into your App.js file

import Perf from 'react-addons-perf'

The Perf object can be used with React in development mode only. You should not include this bundle when building your app for production. To check which mode you’re in, you can add the React Developer Tools Chrome extension here.

You’re in production mode if the icon is black.

You’re in development mode if the icon is red.

Basically by default, when in development mode, the app comes with many helpful warnings that are useful for developers but they take up more space and make the app slower.

So in order to enter production mode, you can follow the instructions at
https://reactjsnews.com/how-to-make-your-react-apps-10x-faster
or
https://stackoverflow.com/questions/22118915/how-to-turn-on-off-reactjs-development-mode

There are a total of eight functions calls:

• start()
• stop()
• getLastMeasurements()
• printInclusive()
• printExclusive()
• printWasted()
• printOperations()
• printDOM()

For now, we’ll just use

• start()
• stop()
• printExclusive()
• printWasted()

Calling the Perf.start() function starts the performance. We would want to put that in an event handler such as

handleClick(event) {
    Perf.start()
    event.preventDefault()
    this.setState({
      clickedRecipe: event.target.innerText
    })
  }

and end the performance once the component has been updated

componentDidUpdate() {
    Perf.stop()
    Perf.printInclusive()
    Perf.printWasted()
  }

Then you would see the result in the console

As you can see, there are several renders taking place and of that there are a couple of wasted time due to unnecessary renders. That is because an update can be caused by changes to props or state .As developers, we should not only strive to render components faster but render only when it is necessary. Upon a completion of a project or rather a component, this is a great way to work backwards to make your app more quicker.