Profiling

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.

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

Show example solution

// Flag to add to app.json
export default {
  expo: {
    name: 'App',
    showPerfMonitor: true
  }
};

Test yourself

What should be done before fixing a performance issue?
- Add a third-party library
- Rewrite the code right away
- Profile and measure
- Remove Expo
Show answer

Profile and measure — Measure first, then act on the bottleneck.

Write the target frame time

For 60 FPS the target frame time is ____ ms.

Show answer

For 60 FPS the target frame time is 16 ms.

Match the Perf Monitor bars

JS bar

JavaScript thread
UI bar

Native render
16 ms

60 FPS target
Flipper

Deep analysis tool

Next lesson: React Profiler

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies