Skip to main content

useComponentLifecycle

Description and use case​

useComponentLifecycle tracks when a component mounts and how long it stays alive. It is useful for detecting remount churn and validating cleanup timing.

API signature​

function useComponentLifecycle(componentName?: string): ComponentLifecycleInfo;

Parameters​

NameTypeRequiredDescription
componentNamestringNoOptional name used in development lifecycle logs.

Return value​

FieldTypeDescription
mountedAtnumberMount timestamp from performance.now() (or Date.now() fallback).
aliveMsnumberTime elapsed since mount, recomputed on each render.

Live interactive demo (StackBlitz)​

GitHub Pages does not serve the isolation headers required for embedded StackBlitz WebContainers. Open the demo in StackBlitz to run it interactively.

Open interactive demo

Code example​

import { useComponentLifecycle } from 'react-perf-hooks';

export function LifecyclePanel() {
  const { mountedAt, aliveMs } = useComponentLifecycle('LifecyclePanel');

  return (
    <div>
      <p>Mounted at: {mountedAt.toFixed(1)}ms</p>
      <p>Alive: {aliveMs.toFixed(1)}ms</p>
    </div>
  );
}

Companion article​