Membuat Profil dengan Flipper dan React DevTools

React Native apps can suffer from dropped frames, slow list scrolling, long startup times, and excessive memory use — all of which frustrate users. Before optimizing, you must measure to understand where the bottleneck actually is, rather than guessing and making speculative changes.

The two primary profiling tools for React Native are Flipper (a native debugging platform) and React DevTools (which includes a component profiler). Used together, they give you visibility into both the JS thread performance and the component render tree.

Flipper is a desktop application by Meta that connects to running React Native apps over USB or a network and displays real-time debugging data. Download it from fbflipper.com and install it on your development machine.

Flipper works out of the box with React Native CLI projects on physical devices and simulators. For Expo apps, you need to use a development build (not Expo Go). Once connected, Flipper's sidebar shows available plugins including React DevTools, Network Inspector, Hermes Debugger, and Layout Inspector.

The React DevTools plugin in Flipper lets you inspect the component tree in real time. You can select any component to see its current props, state, and hooks values in the right panel. This is invaluable for debugging why a component is rendering with unexpected values.

You can also use the standalone react-devtools package: install it globally with npm install -g react-devtools, then run react-devtools and shake your device to open the developer menu and connect.

Inside React DevTools, the Profiler tab records which components rendered and how long each render took. Click Record, interact with the app (scroll a list, type in a field, tap a button), then click Stop. The flame graph shows each render, color-coded from yellow (slow) to blue (fast).

Each bar in the flame graph represents a component re-render. Taller bars indicate more time spent rendering. Clicking a bar shows the render duration in milliseconds and which props or hooks changed to trigger the re-render.

A common performance issue is components that re-render when their props or state have not actually changed. In the React Profiler, look for components that appear in every flame graph frame even when the user is not interacting with them — these are candidates for memoization.

You can also enable the Highlight updates option in React DevTools. Every time a component re-renders, it flashes with a colored border on the screen. Green means a fast render, yellow means slow. Seeing the entire screen flash on a single button press is a sign of excessive re-renders.

Flipper's Layout Inspector shows the native view hierarchy, similar to the iOS View Debugger or Android Layout Inspector. You can tap any element in the inspector to highlight it on the device and inspect its native layout properties.

The Network Inspector shows all HTTP requests made by the app, including headers, body, and response. This is useful for catching redundant API calls, unexpected slow endpoints, or misconfigured caching headers that cause data to be re-fetched unnecessarily.

React Native uses Hermes, a JavaScript engine optimized for mobile, as the default engine since React Native 0.70. Hermes pre-compiles JavaScript to bytecode at build time, dramatically reducing startup time. Flipper's Hermes Debugger lets you profile CPU usage and inspect memory allocations in the JS heap.

To profile JS thread performance, use the Hermes Debugger's Timeline tab. Record a session, then look for long JavaScript tasks that block the UI thread. Tasks longer than 16ms cause dropped frames (below 60fps).

The React Native built-in Performance Monitor (accessible from the developer menu) shows real-time frames per second. Two FPS counters are displayed: the JS FPS (how fast JavaScript executes) and the UI FPS (how fast frames are rendered natively).

The target is 60 FPS for both. If JS FPS drops but UI FPS stays high, the bottleneck is JavaScript logic. If UI FPS drops while JS FPS is high, the bottleneck is in the native rendering layer — often caused by too many Views or complex shadows.

For quick measurements of specific operations — like how long it takes to process an API response or filter a large array — use console.time and console.timeEnd. These are available in Hermes and work in the Metro/Flipper console.

This is useful for identifying expensive data transformations that could be moved off the JS thread, memoized, or simplified before rendering a list.

A common mistake is to apply memoization (React.memo, useCallback, useMemo) everywhere as a precaution. This actually adds cost — memoization runs comparison functions on every render, and for simple components the comparison may cost more than just re-rendering.

The rule is: profile first, then optimize where the profiler shows a real bottleneck. The React Profiler's Why did this render? panel tells you the exact props or hooks that changed for each component, so you know precisely what to memoize.

Development profiling with Flipper only shows performance on your machine. For production insights, integrate a performance monitoring tool like Firebase Performance Monitoring or Sentry Performance. These capture real user metrics including app startup time, screen render duration, and HTTP request latency.

Use perf().startTrace('my-operation') from Firebase Performance to instrument specific flows and see timing data broken down by country, device, and app version in the Firebase console.

Test your understanding of React Native Mobile Development concepts from this lesson.

In this lesson you learned: how to use Flipper and the React DevTools Profiler to record component renders, how to identify unnecessary re-renders using the Highlight Updates overlay, and why you should always measure with profiling tools before applying optimizations. Next up we apply memoization techniques with React.memo, useCallback, and useMemo to eliminate the bottlenecks we discovered.