Helpers to debug and record component render performance 🚀
Helpers to debug and record component render performance
With the release of React Fiber in v16, react-addons-perf
has officially become obsolete. This project aims to be a "close enough" alternate solution.
import ReactPerformance from 'react-performance'
You can also choose to import selectively:
import { measure, startRecording, printRecording } from 'react-performance'
NOTE: In a production environment, ReactPerformance
disables itself.
To measure the rendering of a component, wrap it with the measure
HOC:
class MyComponent extends React.Component {/* ... */}
export default ReactPerformance.measure({
getId: 'some_recognizable_identifier',
Component: MyComponent,
isCollapsed: false,
})
That's it. Now logs will print every time the component renders.
If you use Redux, read the section below on how to Use with Redux.
getId
is a string or function that helps you uniquely identify each component being rendered in the logs.
props
, the key and value are both used. Otherwise it is used as a static value.props
and returns a string.isCollapsed
is true
by default.
To generate reports, start recording data by running:
ReactPerformance.startRecording()
And then print out the report by running:
ReactPerformance.printRecording()
This prints out a report on all the components being measured.
connect
Only "smart" components should be measured since those are typically the components that respond to state changes (and usually the only components that significantly impact performance).
With the assumption that any data passed down to components is encapsulated in a top-level state, the most appropriate way to use this with Redux is to use ReactPerformance.connect
:
class MyComponent extends React.Component {/* ... */}
export default ReactPerformance.connect({
mapStateToProps,
mapDispatchToProps,
getId: 'some_recognizable_identifier',
Component: MyComponent,
})
This is equivalent to ReactPerformance.measure
- except it also connects the component to the Redux store.
createStore
To get measurements on the full duration across all component renders triggered by dispatching actions, a middleware is provided to create the store:
const enhancer = redux.compose(
// ...All other middleware first
// This must be the last one!
ReactPerformance.createNotifier(),
)
const store = redux.createStore(rootReducer, enhancer)
This will log measurements in batches of rerenders caused by updates to the store:
PRs to improve this library are always welcome, but please make sure to test your changes locally before submitting, and to be consistent with the coding style.
To test your changes you have to do the following:
yarn develop
in the root directory, to start a watch process that compiles lib
to dist
cd
into the examples
folder and run yarn && yarn start
to start the react-create-app
serverNow you can test your changes at http://localhost:3000/
© 2017 Amsul
Licensed under MIT