Scribd
Upload
22 views2 pages

React Profiler API Guide

The React Profiler measures how often a React application renders and the cost of rendering. It helps identify slow parts of an app that could benefit from optimizations. Profiling adds overhead so it is disabled in production. The Profiler component requires an id and onRender callback prop. React calls the callback when a component renders to provide timing details. Multiple Profilers can measure different parts of an app or components within a subtree.

Uploaded by

Tanzeel Ahmad Mujahid
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
22 views2 pages

React Profiler API Guide

The React Profiler measures how often a React application renders and the cost of rendering. It helps identify slow parts of an app that could benefit from optimizations. Profiling adds overhead so it is disabled in production. The Profiler component requires an id and onRender callback prop. React calls the callback when a component renders to provide timing details. Multiple Profilers can measure different parts of an app or components within a subtree.

Uploaded by

Tanzeel Ahmad Mujahid
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

# Profiler API

> The Profiler measures how often a React application renders and what the
“cost” of rendering is.

> Its purpose is to help identify parts of an application that are slow and may
benefit from optimizations such as memoization.

> Profiling adds some additional overhead, so it is disabled in the production


build.

# Usage

> A Profiler can be added anywhere in a React tree to measure the cost of
rendering that part of the tree.

> It requires two props: an id (string) and an onRender callback (function)


which React calls any time a component within the tree “commits” an update.

eg.

render(
<App>
<Profiler id="Navigation" onRender={callback}>
<Navigation {...props} />
</Profiler>
<Main {...props} />
</App>
);

> Multiple Profiler components can be used to measure different parts of an


application:

eg.

render(
<App>
<Profiler id="Navigation" onRender={callback}>
<Navigation {...props} />
</Profiler>
<Profiler id="Main" onRender={callback}>
<Main {...props} />
</Profiler>
</App>
);

> Profiler components can also be nested to measure different components


within the same subtree:

eg.

render(
<App>
<Profiler id="Panel" onRender={callback}>
<Panel {...props}>
<Profiler id="Content" onRender={callback}>
<Content {...props} />
</Profiler>
<Profiler id="PreviewPane" onRender={callback}>
<PreviewPane {...props} />
</Profiler>
</Panel>
</Profiler>
</App>
)

# onRender Callback

> The Profiler requires an onRender function as a prop.

> React calls this function any time a component within the profiled tree
“commits” an update.

> It receives parameters describing what was rendered and how long it took.

function onRenderCallback(
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
) {
// Aggregate or log render timings...
}

You might also like