React DevTools Profiler: Find Slow Renders

WHY IT EXISTS: React Native runs on a single JavaScript thread. When a component renders too often or too slowly, it blocks that thread and the UI drops frames. You cannot fix what you cannot see. The Profiler exists to make render cost visible so engineers stop guessing which prop change or context update is causing jank.

THE MENTAL MODEL: Think of it as an X-ray for your component tree. Instead of logging console timestamps, you wrap a subtree in a recording session and get a flamegraph that maps time vertically and component nesting horizontally. Yellow bars mean slow renders, gray means fast, and the width shows how long a component and its children took relative to the whole commit.

HOW IT WORKS: You open the Profiler tab in React DevTools, click the record button, interact with your app, then stop. Each captured commit shows a ranked list and a flamegraph. The ranked list sorts components by self-render time, which is the time spent inside that component excluding children. The flamegraph preserves tree structure so you see if a parent is slow because it has a slow child or because its own logic is expensive. You can also enable the setting to record why each component rendered, which annotates commits with labels like props changed, hooks changed, or parent re-rendered.

WHEN TO USE IT: Use it when you notice choppy interactions, large list scrolling, or navigation transitions that feel sluggish. It is also the right tool after you add memoization because it proves whether React.memo, useMemo, or useCallback actually prevented a subtree from re-rendering. Profile on a real device or a low-end emulator, not just a developer workstation with a fast CPU.

WHEN NOT TO USE IT: Do not use the Profiler to optimize components that are already fast enough. A component that renders in under a millisecond does not need memoization even if it renders a hundred times. Do not profile in production builds because the DevTools hooks add overhead and the numbers will mislead you. Also avoid profiling with React StrictMode double-rendering enabled unless you remember to mentally halve the render counts.

ONE CANONICAL EXAMPLE: You have a chat screen where typing into the input lags. You record a Profiler session while typing and see that the MessageList component re-renders on every keystroke because the parent passes a new array reference for messages. The ranked list shows MessageList at the top with a wide yellow bar. You lift the message data into a flat list with proper key props and wrap MessageList in React.memo. A second recording shows the bar shrink and the input stays responsive.