20/02/2025, 09:02 <Profiler> – React
v19
API REFERENCE COMPONENTS
<Profiler>
<Profiler> lets you measure rendering performance of a React
tree programmatically.
<Profiler id="App" onRender={onRender}>
<App />
</Profiler>
Reference
<Profiler>
onRender callback
Usage
Measuring rendering performance programmatically
Measuring different parts of the application
Reference
<Profiler>
Wrap a component tree in a <Profiler> to measure its rendering
performance.
<Profiler id="App" onRender={onRender}>
<App />
</Profiler>
https://react.dev/reference/react/Profiler 1/6
20/02/2025, 09:02 <Profiler> – React
Props
id : A string identifying the part of the UI you are measuring.
onRender : An onRender callback that React calls every time components
within the profiled tree update. It receives information about what was
rendered and how much time it took.
Caveats
Profiling adds some additional overhead, so it is disabled in the
production build by default. To opt into production profiling, you need to
enable a special production build with profiling enabled.
onRender callback
React will call your onRender callback with information about what was
rendered.
function onRender(id, phase, actualDuration, baseDuration, startTime, comm
// Aggregate or log render timings...
}
Parameters
id : The string id prop of the <Profiler> tree that has just committed.
This lets you identify which part of the tree was committed if you are
using multiple profilers.
phase : "mount" , "update" or "nested-update" . This lets you know
whether the tree has just been mounted for the first time or re-rendered
due to a change in props, state, or Hooks.
actualDuration : The number of milliseconds spent rendering the
<Profiler> and its descendants for the current update. This indicates
how well the subtree makes use of memoization (e.g. memo and useMemo ).
Ideally this value should decrease significantly after the initial mount as
https://react.dev/reference/react/Profiler 2/6
20/02/2025, 09:02 <Profiler> – React
many of the descendants will only need to re-render if their specific props
change.
baseDuration : The number of milliseconds estimating how much time it
would take to re-render the entire <Profiler> subtree without any
optimizations. It is calculated by summing up the most recent render
durations of each component in the tree. This value estimates a worst-
case cost of rendering (e.g. the initial mount or a tree with no
memoization). Compare actualDuration against it to see if memoization
is working.
startTime : A numeric timestamp for when React began rendering the
current update.
commitTime : A numeric timestamp for when React committed the current
update. This value is shared between all profilers in a commit, enabling
them to be grouped if desirable.
Usage
Measuring rendering performance programmatically
Wrap the <Profiler> component around a React tree to measure its
rendering performance.
<App>
<Profiler id="Sidebar" onRender={onRender}>
<Sidebar />
</Profiler>
<PageContent />
</App>
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.
https://react.dev/reference/react/Profiler 3/6
20/02/2025, 09:02 <Profiler> – React
Pitfall
Profiling adds some additional overhead, so it is disabled in the
production build by default. To opt into production profiling, you
need to enable a special production build with profiling enabled.
Note
<Profiler> lets you gather measurements programmatically. If
you’re looking for an interactive profiler, try the Profiler tab in React
Developer Tools. It exposes similar functionality as a browser
extension.
Measuring different parts of the application
You can use multiple <Profiler> components to measure different parts of
your application:
<App>
<Profiler id="Sidebar" onRender={onRender}>
<Sidebar />
</Profiler>
<Profiler id="Content" onRender={onRender}>
<Content />
</Profiler>
</App>
You can also nest <Profiler> components:
https://react.dev/reference/react/Profiler 4/6
20/02/2025, 09:02 <Profiler> – React
<App>
<Profiler id="Sidebar" onRender={onRender}>
<Sidebar />
</Profiler>
<Profiler id="Content" onRender={onRender}>
<Content>
<Profiler id="Editor" onRender={onRender}>
<Editor />
</Profiler>
<Preview />
</Content>
</Profiler>
</App>
Although <Profiler> is a lightweight component, it should be used only
when necessary. Each use adds some CPU and memory overhead to an
application.
PREVIOUS
<Fragment> (<>)
NEXT
<StrictMode>
Copyright © Meta Platforms, Inc
uwu?
Learn React API Reference
https://react.dev/reference/react/Profiler 5/6
20/02/2025, 09:02 <Profiler> – React
Quick Start React APIs
Installation React DOM APIs
Describing the UI
Adding Interactivity
Managing State
Escape Hatches
Community More
Code of Conduct Blog
Meet the Team React Native
Docs Contributors Privacy
Acknowledgements Terms
https://react.dev/reference/react/Profiler 6/6
