Awesome

Measure React rendering lifecycles using controls using a simple component

Installation

$ yarn add -D rn-render-perfs

In your code

import RnRenderPerfs from 'rn-render-perfs';
import Perf from 'ReactPerf';

export default function App() {
  return (
      <View>
        <YourApp />
        <RnRenderPerfs monitor={Perf} />
      </View>
  );
};

You can pass any kind of Perf module inside monitor props that implements :

• start: Function
• stop: Function
• printWasted: Function
• printInclusive: Function
• printExclusive: Function
• printOperations: Function

What can I expect from this module ?

This module is a simple wrapper allowing to call Perf modules using the same API as the react-addons-perfs one.

With the previous code example, you can access to these information (from react-addons-perfs doc) :

• Print wasted: “Wasted” time is spent on components that didn’t actually render anything
• Print Inclusive: Print the overall time taken by React
• Print Exclusive: “Exclusive” times don’t include the times taken to mount the components: processing props, calling componentWillMount and componentDidMount, etc.
• Print operations: Prints the underlying manipulations

With the help of @flepretre & @kennydee