Profiling
- React Native course
- Expert
- Lesson 7/47
- 5 min
Learn profiling and performance measurement.
What is profiling?
Profiling means measuring where the app spends time. In React Native this means measuring the JS and native sides separately; knowing which side the bottleneck is on matters.
React Native ships a Perf Monitor that shows JS and UI thread frame times. For deeper analysis you use react-native-performance and Flipper. Never optimize without measuring; measure first, then find the bottleneck.
Perf Monitor
React Native's Perf Monitor is opened from the dev menu. Two bars appear on screen: JS on top, UI below. Each shows milliseconds per frame.
If the JS bar stays high, the issue is on the JS side; if the UI bar is high, there is a native render bottleneck. The target is 16 ms, which is 60 FPS.
Practice Enable the Perf Monitor flag
Write the flag that turns on Perf Monitor in the React Native dev settings. The value should be true, the key showPerfMonitor.
Starter code
// Flag to add to app.json
// showPerfMonitor: ...
export default {
expo: { name: 'App' }
};Sample solution
// Flag to add to app.json
export default {
expo: {
name: 'App',
showPerfMonitor: true
}
};Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What should be done before fixing a performance issue?
- Add a third-party library
- Rewrite the code right away
- Profile and measure Correct answer
- Remove Expo
Explanation: Measure first, then act on the bottleneck.
2 Write the target frame time
For 60 FPS the target frame time is ____ ms.For 60 FPS the target frame time is 16 ms.Explanation: 60 FPS = 16 ms frame time.
3 Match the Perf Monitor bars
| Term | Meaning |
|---|---|
JS bar |
JavaScript thread |
UI bar |
Native render |
16 ms |
60 FPS target |
Flipper |
Deep analysis tool |