Finding React Components to Optimize

SOUND FOREST by WILLPOWER STUDIOS (WILLIAM ISMAEL, CC BY-ND 2.0)

Tools to Debug Performance

A common starting point for many developers is to simply log calls to render (or mapStateToProps) and watch the output in your developer console. This is a legitimate approach with the benefits of requiring minimal tool experience and no external dependencies. Relying on console.log is messy in the long term, but starting here gives you a good sense of when the state is changing in your application and how many times your component is being rendered.

Perf

If you’re stuck with React 15 for a while, the Perf library is a good way to go. You’ll need to add react-addons-perf to your project’s development dependencies and ensure that the library is exposed to the browser:

if (process.env.NODE_ENV === 'development' && window) {
  window.Perf = require('react-addons-perf');
}
> Perf.start()… (perform some state-changing user actions in the browser)> Perf.stop()

printWasted

There are a few different reports that Perf can print once some performance data has been captured. We find Perf.printWasted() most useful: it outputs a table with a row for every component that rendered output that was ultimately discarded by React during reconciliation. The total number of calls and time these calls took (in milliseconds) are also provided.

Example output of the printWasted method. The third column shows the amount of wasted time spent rendering components that were ultimately discarded by React’s reconciliation process. The fourth and fifth columns show the number of instances of a component on the page and the number of times that component rendered, respectively.

printOperations

Another useful method is Perf.printOperations(), which shows a table of operations React made to the actual browser DOM. In other words, this report is the complement to printWasted, showing render calls that React actually used.

Partial output of printOperations, from the same segment of profile data that was used to generate the printWasted table above.

Riipen Engineering

A discussion of Riipen engineering and technology

Kyle Robertson

Written by

Full-stack consultant at https://typefirst.ca/

Riipen Engineering

A discussion of Riipen engineering and technology