Why Your React Component Re-renders and How to Trace It

A React component re-renders when its state changes or when its parent re-renders. Tracing a re-render means finding which update caused it. The React DevTools Profiler shows exactly which components rendered, so you can match a re-render to its cause.

Two reasons a component renders

A component renders on its initial render, and it re-renders when state updates. The update can come from the component itself or from an ancestor. A parent re-render cascades down to its children, which is the part beginners often find surprising.

App.jsx

import { useState } from "react";
 
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Clicking the button calls setCount, which triggers a re-render of Counter. React also re-renders every child of Counter, because the child output might depend on the new state. That default is intentional, and memoization is the opt-out when a subtree is slow.

What re-rendering actually does

Rendering is React calling your component function. React compares the returned JSX with the previous result and only commits the differences to the DOM.

A re-render is not a full page reload. React reuses DOM nodes that did not change. This is why typing in an input does not lose its text when a sibling re-renders. The render and commit guide walks through the trigger, render, and commit steps in detail.

Trace a re-render with the Profiler

Open React DevTools and select the Profiler tab. Click record, interact with the page, then stop recording. The flamegraph lists every component that rendered and how long each one took.

The Components tab has a Highlight updates setting. Turn it on and React outlines components with a flashing border as they render, so you can watch a re-render spread through the tree in real time.

The DevTools guide covers installing and opening these tools.

Common causes of extra renders

Most unnecessary re-renders come from new values created during render.

• A new object or array literal passed as a prop is a fresh value every render.
• A new inline function passed as a prop does the same.
• A context value change re-renders every component that reads it.

None of these are automatically bugs. Re-rendering is cheap, and the fix is often to measure first. Only optimize a render that the Profiler shows is actually hurting.

A re-render alone is not a problem. The problem is a slow re-render, so let the Profiler point you to the component that takes the time.

What to learn next

When a re-render is genuinely expensive, the performance guide shows memoization and profiling techniques that skip work without guessing.