{"data":{"markdownRemark":{"html":"
\n

Note:

\n

As of React 16, react-addons-perf is not supported. Please use your browser’s profiling tools to get insight into which components re-render.

\n
\n

Importing

\n
import Perf from 'react-addons-perf'; // ES6\nvar Perf = require('react-addons-perf'); // ES5 with npm
\n

Overview

\n

React is usually quite fast out of the box. However, in situations where you need to squeeze every ounce of performance out of your app, it provides a shouldComponentUpdate() method where you can add optimization hints to React’s diff algorithm.

\n

In addition to giving you an overview of your app’s overall performance, Perf is a profiling tool that tells you exactly where you need to put these methods.

\n

See these articles for an introduction to React performance tooling:

\n\n

Development vs. Production Builds

\n

If you’re benchmarking or seeing performance problems in your React apps, make sure you’re testing with the minified production build. The development build includes extra warnings that are helpful when building your apps, but it is slower due to the extra bookkeeping it does.

\n

However, the perf tools described on this page only work when using the development build of React. Therefore, the profiler only serves to indicate the relatively expensive parts of your app.

\n

Using Perf

\n

The Perf object can be used with React in development mode only. You should not include this bundle when building your app for production.

\n

Getting Measurements

\n\n

Printing Results

\n

The following methods use the measurements returned by Perf.getLastMeasurements() to pretty-print the result.

\n\n
\n

Reference

\n

start()

\n

stop()

\n
Perf.start()\n// ...\nPerf.stop()
\n

Start/stop the measurement. The React operations in-between are recorded for analyses below. Operations that took an insignificant amount of time are ignored.

\n

After stopping, you will need Perf.getLastMeasurements() to get the measurements.

\n
\n

getLastMeasurements()

\n
Perf.getLastMeasurements()
\n

Get the opaque data structure describing measurements from the last start-stop session. You can save it and pass it to the other print methods in Perf to analyze past measurements.

\n
\n

Note

\n

Don’t rely on the exact format of the return value because it may change in minor releases. We will update the documentation if the return value format becomes a supported part of the public API.

\n
\n
\n

printInclusive()

\n
Perf.printInclusive(measurements)
\n

Prints the overall time taken. When no arguments are passed, printInclusive defaults to all the measurements from the last recording. This prints a nicely formatted table in the console, like so:

\n

\n \n \n \n \n \n \n \n \n \n

\n
\n

printWasted()

\n
Perf.printWasted(measurements)
\n

The most useful part of the profiler.

\n

“Wasted” time is spent on components that didn’t actually render anything, e.g. the render stayed the same, so the DOM wasn’t touched.

\n

\n \n \n \n \n \n \n \n \n \n

\n
\n

printOperations()

\n
Perf.printOperations(measurements)
\n

Prints the underlying DOM manipulations, e.g. “set innerHTML” and “remove”.

\n

\n \n \n \n