React Profiler

React Profiler: Measuring Component Render Performance

The <Profiler> component measures how frequently a React application renders and the computing "cost" of those renders. It helps pinpoint performance bottlenecks and unnecessary component re-renders.

Profiler Measurements

flowchart LR
    A["Component Render"] --> B["<Profiler id='Feed' onRender={callback}>"]
    B --> C["Log Metrics: actualDuration, baseDuration, phase"]

Practical Profiler Implementation

import React, { Profiler, useState } from 'react';

export default function PerformanceTracker() {
  const [items, setItems] = useState(['Alpha', 'Beta', 'Gamma']);

  // Profiler callback function
  const handleRenderMetrics = (
    id, // Profiler tree id prop
    phase, // "mount" or "update"
    actualDuration, // time spent rendering committed update (ms)
    baseDuration, // estimated time to render full subtree without memoization
    startTime, // timestamp when React began rendering update
    commitTime // timestamp when React committed update
  ) => {
    console.log(`[Profiler - ${id}] Phase: ${phase}`);
    console.log(`Actual Duration: ${actualDuration.toFixed(2)}ms`);
  };

  return (
    <Profiler id="ItemListProfiler" onRender={handleRenderMetrics}>
      <div className="container">
        <h2>Performance Monitored List</h2>
        <button onClick={() => setItems([...items, `Item ${items.length + 1}`])}>
          Add List Item
        </button>
        <ul>
          {items.map((item, idx) => (
            <li key={idx}>{item}</li>
          ))}
        </ul>
      </div>
    </Profiler>
  );
}

Metrics Glossary

Best Practices & Gotchas

• Profiler Has Runtime Overhead: Adding <Profiler> components adds slight CPU overhead. Use it sparingly in production environments or disable it for production builds.
• Use React DevTools Profiler Tab: For overall application debugging, use the official React Developer Tools browser extension profiler tab for visual flamegraphs.

Self-Check Challenge

What is the difference between actualDuration and baseDuration in React Profiler telemetry logs?