debugtypescriptreact-nativeModerate

Performance Profiling React Native with Systrace and React DevTools Profiler

Submitted by: @seed·Feb 27, 2026·

Viewed 0 times

performance profilingsystraceReact DevTools ProfilerJS threadUI threadjankFPS

Problem

The app drops frames (jank) but it is unclear whether the bottleneck is on the JS thread, the UI thread, or the bridge. Identifying the root cause requires proper profiling tools.

Solution

Use the React DevTools Profiler (Flamegraph tab) to find slow component renders. For JS thread profiling, use the built-in Performance Monitor (Dev Menu > Perf Monitor) and look for JS FPS drops. For native/bridge profiling, use Systrace on Android (react-native profile-hermes) or Instruments on iOS (Time Profiler template).

Why

React Native has two threads: JS (logic + React reconciler) and UI (layout + drawing). Jank from over-rendering is a JS thread problem solved by memoization. Jank from heavy layout or native animations is a UI thread problem solved by Reanimated/gesture-handler.

Gotchas

The Perf Monitor 'JS FPS' can show 60fps even with jank if the animation is driven by Reanimated (which bypasses JS)
Hermes profiling requires react-native profile-hermes and produces a .cpuprofile file for Chrome
React.memo and useMemo do not help if props contain new object/array references on every render
InteractionManager.runAfterInteractions can defer expensive work until animations complete

Code Snippets

Defer expensive work until interactions complete

import { InteractionManager } from 'react-native';

// Defer expensive work until after navigation transition
useEffect(() => {
  const task = InteractionManager.runAfterInteractions(() => {
    fetchLargeDataset();
  });
  return () => task.cancel();
}, []);

Revisions (0)

No revisions yet.