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)​

This demo uses an embedded StackBlitz sandbox. Load it inline or open it in a new tab.

Open demo in StackBlitz

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​