[React][Debug] Inspect Component Renders with Chrome React Developer Tools

1. Environment

• OS: Windows 11 / macOS (Chrome on both)
• Frontend library: React.js
• Tools: Chrome, React Developer Tools (Chrome extension)

2. Problem

As a React app grows, reading the code alone rarely answers: “Is this component re-rendering for no good reason|–

The UI can look fine while, in the background, hundreds of components redraw on every keystroke and quietly eat performance.

3. Cause

When a parent?’s state changes, React usually re-renders its children as well.

Rendering itself is invisible. If the UI feels janky and you only guess at the cause, you may “fix|–the wrong code or sprinkle useMemo everywhere.

You need an X-ray: a way to see and trace renders instead of relying on instinct.

4. Solution

1) Install and open the tools

1. Install React Developer Tools from the Chrome Web Store.
2. On a React page, open DevTools (F12 or Cmd+Option+I). You should see “️ Components and “️ Profiler tabs.

2) Highlight updates (render flashes)

Show a border whenever a component re-renders:

1. DevTools |–“️ Components |–Settings |–General
2. Enable Highlight updates when components render.

Then click buttons or scroll. Flashing borders (green |–yellow |–red) mark what re-rendered. Color tracks how often / how expensive the update is.

If one button paints the whole screen red, you have serious render waste.

3) Profile for exact causes

When you need which state/props changed and how many ms a render took:

1. DevTools |–“️ Profiler
2. Click Start profiling
3. Reproduce the slow action (click, open a modal, etc.)
4. Click Stop profiling

You get a bar chart:

• Gray bars: components that did not re-render this pass
• Colored bars: components that did

Click a colored bar. The right panel often shows Why did this render?
Example: Hook 1 changed -the first hook?’s value changed.

Profiler hook numbers are top-to-bottom order of every Hook in that component - not “only useState -

function UserProfile() {
  // 1st Hook |--Profiler: "Hook 1"
  const [userName, setUserName] = useState('');

  // 2nd Hook |--Profiler: "Hook 2"
  useEffect(() => {
    // API call...
  }, []);

  // 3rd Hook |--Profiler: "Hook 3"
  const [age, setAge] = useState(20);

  // 4th Hook |--Profiler: "Hook 4"
  const isAdult = useMemo(() => age >= 18, [age]);

  // 5th Hook |--Profiler: "Hook 5"
  const inputRef = useRef(null);

  // ...
}

5. Summary

React Developer Tools let you see renders and track why they happened.

A practical performance loop has three steps:

1. Find |–use Highlight updates to spot areas that flash too much.
2. Analyze |–record in Profiler and get proof (which state/props/hook).
3. Fix |–if the work is light, leave it; if it is heavy or cascades into a 1,000-item list, apply useMemo / React.memo as in earlier posts.

Related: useMemo vs React.memo · useMemo and memoization