Function RenderDetector

RenderDetector

Wraps a subtree in a React Profiler, tracks commit frequency and render cost in a sliding window, and reports when thresholds are exceeded. Intended primarily for development; can be force-enabled in production for targeted diagnostics.

What it measures

• commits/sec over the last windowMs (default 2s)
• render ms/sec (sum of actualDuration) over the last windowMs

When it reports

• When commitsPerSec > commitsPerSecThreshold OR
• When renderMsPerSec > renderMsPerSecThreshold
• Only after at least minCommits commits within the window
• At most once per cooldownMs

Telemetry

• Sends a single DataDog action (sampled) per hotspot with: { id, commitsPerSec, renderMsPerSec, commitsInWindow, reasons, windowMs, ... }
• Defaults: telemetryActionName = "render_hotspot", telemetrySampleRate = 20
• You can disable telemetry by setting telemetrySampleRate: 0

Example

import { RenderDetector } from "@milliman/dd-ux-utils/react/dev/RenderDetector";

function ResultsPanel() {
  return (
    <RenderDetector
      id="ResultsPanel"
      options={{
        commitsPerSecThreshold: 6,
        renderMsPerSecThreshold: 30,
        onHotspot: info => console.warn("Render hotspot:", info),
      }}
    >
      <ExpensiveResults />
    </RenderDetector>
  );
}
Copy

Example (force-enable in production, different thresholds)

<RenderDetector
  id="SearchResults"
  options={{
    enabled: true,                   // opt-in for prod
    windowMs: 3000,
    commitsPerSecThreshold: 4,
    renderMsPerSecThreshold: 20,
    telemetrySampleRate: 10,
    context: { route: "/search" },
  }}
>
  <SearchResults />
</RenderDetector>
Copy