Skip to main content

Getting Started

react-perf-hooks is a focused toolkit for measuring render frequency, runtime cost, and user-facing performance signals in React applications.

Installation​

npm install react-perf-hooks

Optional peer dependency for useWebVitals:

npm install web-vitals

Setup​

Import only the hooks you need. The package is tree-shakeable.

import {
  useCLS,
  useComponentLifecycle,
  useDebouncedState,
  useINP,
  useIntersectionObserver,
  useLongTasks,
  useMemoProfiling,
  useMemoryStatus,
  usePerformanceMark,
  useRenderBudget,
  useRenderTracker,
  useThrottledState,
  useWebVitals,
} from 'react-perf-hooks';

Development vs production behavior​

  • useRenderTracker, useRenderBudget, useComponentLifecycle, and useMemoProfiling are development-oriented by default.
  • Most debug logging is disabled when NODE_ENV=production.
  • If needed, you can force-enable selected hooks in production for temporary diagnostics via their enabled options.

Quick start example​

import { useDebouncedState, useRenderBudget, useRenderTracker } from 'react-perf-hooks';

export function SearchPanel() {
  const [query, setQuery, stats] = useDebouncedState('', 250);

  useRenderTracker({ query }, { name: 'SearchPanel', warnAt: 12 });
  useRenderBudget(16, 'SearchPanel');

  return (
    <section>
      <input value={query} onChange={(event) => setQuery(event.target.value)} />
      <p>Skipped renders: {stats.skippedRenders}</p>
    </section>
  );
}