React Profiler
- React Native course
- Expert
- Lesson 8/47
- 5 min
Learn the React Profiler and render times.
React Profiler
React provides a Profiler component that measures render time per component. For each component wrapped in <Profiler>, an onRender callback fires.
The callback receives the component id, the phase (mount/update) and the durations. This shows which component is slow. React DevTools also ships a visual Profiler.
Render phases
The Profiler's phase parameter takes two values: mount (first render) and update (state/props changed). Each phase's duration differs; mount is usually longer.
actualDuration is the actual time this render took. baseDuration is what it would take without memoization. The difference shows the gain from memo.
Practice Wrap with the Profiler
Wrap a List component with Profiler. The onRender callback should be (id, phase, actualDuration) => console.log(id, phase, actualDuration). Import Profiler from React.
Starter code
import React from 'react';
function List() {
return null;
}
// Wrap List with Profiler and export itSample solution
import React, { Profiler } from 'react';
function List() {
return null;
}
const WrappedList = () => (
<Profiler id="list" onRender={(id, phase, actualDuration) => console.log(id, phase, actualDuration)}>
<List />
</Profiler>
);
export default WrappedList;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Write the Profiler callback name
<Profiler ____={(id, phase, actualDuration) => console.log(id, phase)}><Profiler onRender={(id, phase, actualDuration) => console.log(id, phase)}>Explanation: onRender fires on every render.
2 What does actualDuration measure?
- This render's actual time
- Total app size
- Number of network requests
- Memory usage Correct answer
Explanation: actualDuration is this render's actual time.
3 Match the Profiler pieces
| Term | Meaning |
|---|---|
mount |
First render |
update |
State/props changed |
actualDuration |
Actual time |
baseDuration |
Time without memoization |