⏱️ React Profiler Tool

⚛️ Quick Overview

The React Profiler is a tool built into the React Developer Tools extension that helps you measure and visualize component render performance.

It tracks which components render, how long they take, and what triggered those renders — making it invaluable for optimizing performance.

? Installing React Developer Tools

To access the Profiler:

1. Install the React Developer Tools browser extension.
2. Open your app in Chrome or Edge DevTools.
3. Go to the “Profiler” tab next to “Components”.

You can now record and analyze rendering behavior in real time.

? Profiling React Components

You can profile performance either via the browser DevTools or programmatically using the <Profiler> component.

// Example: Using the Profiler API
import React, { Profiler } from "react";
import AppContent from "./AppContent";

function App() {
  const onRenderCallback = (id, phase, actualDuration) => {
    // Log render metrics to the console
    console.log(`${id} rendered in ${actualDuration.toFixed(2)}ms during ${phase}`);
  };

  return (
    // Wrap the part of the app you want to measure
    <Profiler id="AppContent" onRender={onRenderCallback}>
      <AppContent />
    </Profiler>
  );
}

export default App;

The callback receives details like:

• id – the component name being measured
• phase – “mount” or “update”
• actualDuration – how long rendering took (in ms)
• baseDuration – estimated render cost without memoization
• startTime / commitTime – render timestamps

⚙️ Profiling in DevTools

The visual Profiler provides an intuitive interface to analyze component performance.

1. Click the “Start profiling” button (red dot icon).
2. Interact with your app (click, scroll, update states).
3. Click “Stop profiling” to view results.

Profiler displays:

• Render duration per component (color-coded)
• Why each component rendered (state, props, or parent change)
• Commit times and flame graphs

Components that took longer to render appear in warmer colors (yellow/orange/red).

? Profiler Metrics Overview

? Interpreting the Profiler Output

• Frequent renders: Component may depend on unstable props or context.
• High render time: Indicates expensive logic or large DOM operations.
• Long commit phase: Usually caused by layout recalculations or complex updates.
• React.memo ineffective: Possibly due to reference changes in props (objects/functions).

? Example: Detecting Inefficiency

// A simple app where Child renders too often
function Child({ onClick }) {
  console.log("Child rendered");
  return <button onClick={onClick}>Click</button>;
}

const MemoChild = React.memo(Child);

function Parent() {
  const [count, setCount] = React.useState(0);

  // ❌ This causes new function creation each render
  const handleClick = () => setCount(count + 1);

  return (
    <div>
      <p>Count: {count}</p>
      // MemoChild re-renders because handleClick is a new reference
      <MemoChild onClick={handleClick} />
    </div>
  );
}

In the Profiler, you’ll see Child re-rendering every time. The fix: wrap handleClick in useCallback() to stabilize its reference.