How do you use the React Profiler to identify causes of component rerenders on mobile screens?

Short answer

Wrap screens with <Profiler> to record actualDuration and baseDuration metrics, or use the Profiler tab in React Native DevTools to record and analyze rerenders.

Explanation

The Profiler helps identify components that rerender unnecessarily and measures each component's render time in milliseconds. By analyzing the cause (changed props or Context), you can use React.memo or useMemo or restructure data passing so that only the relevant parts update.

Code example

import { Profiler } from "react";

function onRenderCallback(id: string, phase: string, actualDuration: number) {
  if (actualDuration > 16) {
    console.warn(`${id} took ${actualDuration}ms during ${phase}`);
  }
}

<Profiler id="HomeScreen" onRender={onRenderCallback}>
  <HomeScreen />
</Profiler>;

Common mistakes

• Leaving Profiler components active in final production releases for users.

Follow-up questions

• How do you detect and fix memory leaks in React Native apps?

Sources

• React Native docs — Profiling
• React docs — Profiler