Using the React Profiler

10. March, 2020 2-minute read

Profiling a single component or dom tree

With react native 0.57 and up Facebook integrated a Profiler component we can use to test a single component or component tree. Simply wrap the desired component with a <Provider id={ID} onRender={CALLBACK}></Provider> and add a callback function to your code.
The callback function receives these props:

id, // the “id” prop of the Profiler tree that has just committed
phase, // either “mount” (if the tree just mounted) or “update” (if it re-rendered)
actualDuration, // time spent rendering the committed update
baseDuration, // estimated time to render the entire subtree without memoization
startTime, // when React began rendering this update
commitTime, // when React committed this update
interactions // the Set of interactions belonging to this update

You can process the data any way you like, e.g. count the render cycles, compare the durations and such. This is a more code-related approach and can help to identify resource-heavy components within your app. In contrast it does not give you insights into the bare metal resource usage of your software on a real device.

render() {
    <Profiler id={ID} onRender={this.callback}>
        <MyComponent />
    </Profiler>
}

{...}

callback = (
    id, 
    phase,
    actualDuration,
    baseDuration,
    startTime,
    commitTime,
    interactions
    ) = { _do something..._}

As always you can find more information on the official docs: Link