Performance monitor
- React Native course
- Intermediate
- Lesson 104/116
- 5 min
Learn the performance monitor and FPS.
What is the performance monitor?
The performance monitor is React Native's built-in FPS and RAM gauge. When you pick Show Perf Monitor from the developer menu a small window opens on screen; it updates every second. It shows two rows: the JS and UI thread FPS values.
FPS (frames per second) higher means smoother. 60 FPS is ideal; below 30 signals stuttering. RAM usage also appears; this helps with memory leak suspicions. The performance monitor runs on a real device; simulator values can be misleading. By watching FPS drops during scroll you can find which screen is slow.
FPS and RAM
The performance monitor shows two FPS rows. The JS row reflects the JavaScript thread's speed; the UI row reflects the native drawing speed. The first drops from heavy computation; the second from heavy rendering.
By watching FPS drops you understand the source. If JS drops, optimize your computation; if UI drops, reduce the component count. If RAM grows over time, a memory leak may exist; useEffect cleanup may be missing. The performance monitor is a starting point; for detailed analysis use Flipper's Profiler tab or React DevTools' Profiler. Reading the numbers lets you guess where the problem is.
Practice Write a heavy computation
Write a heavy computation that will drop FPS in the performance monitor. Build a 1000-element array with a for loop; call arr.push(i) each step. Let i go from 0 to 1000.
Starter code
// Write a heavy computation; build a big array with a for loop
// Add an element each step; i goes 0 to 1000Sample solution
const arr = [];
for (let i = 0; i < 1000; i++) {
arr.push(i);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 The perf monitor menu
// Shake the device to open the menu, choose "____"// Shake the device to open the menu, choose "Show Perf Monitor"Explanation: Show Perf Monitor opens the FPS window.
2 Match each metric to its role
| Term | Meaning |
|---|---|
JS FPS |
Compute speed |
UI FPS |
Drawing speed |
RAM |
Memory usage |
60 FPS |
Ideal target |
3 What does the performance monitor show?
[Show Perf Monitor]- CPU temperature
- Battery level
- Network speed
- FPS and RAM Correct answer
Explanation: The performance monitor shows FPS and RAM.