Performance monitor

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.

Exercise 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.

Show example solution

const arr = [];
for (let i = 0; i < 1000; i++) {
  arr.push(i);
}

Test yourself

The perf monitor menu

// Shake the device to open the menu, choose "____"

Show answer

// Shake the device to open the menu, choose "Show Perf Monitor"

Match each metric to its role

JS FPS

Compute speed
UI FPS

Drawing speed
RAM

Memory usage
60 FPS

Ideal target
What does the performance monitor show?
```
[Show Perf Monitor]
```
- CPU temperature
- Battery level
- Network speed
- FPS and RAM
Show answer

FPS and RAM — The performance monitor shows FPS and RAM.

Next lesson: Summary - Dev tools

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies