or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

tessl/npm-react-addons-perf

A performance profiling tool for React applications that provides detailed insights into component render times, wasted renders, and DOM operations

Workspace: tessl
Visibility: Public
Created: 3 months ago
Last updated: 3 months ago
Describes: pkg:npm/react-addons-perf@15.4.x

To install, run

npx @tessl/cli install tessl/npm-react-addons-perf@15.4.0

React Addons Perf

React Addons Perf is a performance profiling tool for React applications that provides detailed insights into component render times, wasted renders, and DOM operations. It helps developers identify performance bottlenecks and optimization opportunities by measuring and analyzing React component behavior during development.

Package Information

Package Name: react-addons-perf
Package Type: npm
Language: JavaScript (with Flow types)
Installation: npm install react-addons-perf

Core Imports

import Perf from 'react-addons-perf';

For CommonJS:

var Perf = require('react-addons-perf');

For React with addons bundle:

var Perf = React.addons.Perf;

Basic Usage

import Perf from 'react-addons-perf';

// Start profiling
Perf.start();

// Perform React operations (renders, updates, etc.)
// ... your app code here ...

// Stop profiling
Perf.stop();

// View results
Perf.printWasted(); // Most useful - shows wasted renders
Perf.printInclusive(); // Shows inclusive render times
Perf.printExclusive(); // Shows exclusive render times
Perf.printOperations(); // Shows DOM operations

Architecture

React Addons Perf integrates with React's development build to collect performance measurements:

Development-Only: All functionality is disabled in production builds for security and performance
ReactDebugTool Integration: Uses React's internal ReactDebugTool API to capture timing data during component lifecycle events
Session-Based: Collects data between start() and stop() calls, storing measurements in flushHistory
Hook-Based Collection: Registers hooks for lifecycle events (render, componentDidMount, etc.) to measure execution time
Console Integration: Outputs formatted tables using console.table() for easy analysis
Data Analysis: Provides multiple views of the same performance data for different optimization insights
Component Tree Tracking: Maintains snapshots of React's component tree structure to provide contextual performance data

Capabilities

Profiling Control

Control when performance measurements are collected.

/**
 * Start performance measurement session
 * No-op in production builds
 */
function start(): void;

/**
 * Stop performance measurement session
 * No-op in production builds
 */
function stop(): void;

/**
 * Check if profiler is currently running
 * @returns false in production builds
 */
function isRunning(): boolean;

Measurement Data Retrieval

Access raw and processed performance measurement data.

/**
 * Get measurement data from last profiling session
 * @returns Array of HistoryItem objects containing measurements, operations, and tree snapshots. Empty array in production builds.
 */
function getLastMeasurements(): FlushHistory;

/**
 * Calculate exclusive render times (excluding child components)
 * @param flushHistory - Optional measurement data, defaults to getLastMeasurements()
 * @returns Array of exclusive time statistics
 */
function getExclusive(flushHistory?: FlushHistory): ExclusiveStats[];

/**
 * Calculate inclusive render times (including child components)
 * @param flushHistory - Optional measurement data, defaults to getLastMeasurements()
 * @returns Array of inclusive time statistics
 */
function getInclusive(flushHistory?: FlushHistory): InclusiveStats[];

/**
 * Identify components that rendered without DOM changes (wasted renders)
 * @param flushHistory - Optional measurement data, defaults to getLastMeasurements()
 * @returns Array of wasted render statistics
 */
function getWasted(flushHistory?: FlushHistory): WastedStats[];

/**
 * Get DOM operations performed during measurement
 * @param flushHistory - Optional measurement data, defaults to getLastMeasurements()
 * @returns Array of DOM operation records
 */
function getOperations(flushHistory?: FlushHistory): OperationStats[];

Console Output

Display formatted performance data in the browser console.

/**
 * Print exclusive render times to console table
 * @param flushHistory - Optional measurement data
 */
function printExclusive(flushHistory?: FlushHistory): void;

/**
 * Print inclusive render times to console table
 * @param flushHistory - Optional measurement data
 */
function printInclusive(flushHistory?: FlushHistory): void;

/**
 * Print wasted render analysis to console table
 * @param flushHistory - Optional measurement data
 */
function printWasted(flushHistory?: FlushHistory): void;

/**
 * Print DOM operations to console table
 * @param flushHistory - Optional measurement data
 */
function printOperations(flushHistory?: FlushHistory): void;

Deprecated Methods

Legacy methods maintained for backwards compatibility.

/**
 * @deprecated Use printOperations() instead
 * Print DOM operations to console table
 */
function printDOM(measurements: FlushHistory): void;

/**
 * @deprecated Use getWasted() instead
 * Get wasted render statistics
 */
function getMeasurementsSummaryMap(measurements: FlushHistory): WastedStats[];

Types

// Core measurement data structure
type FlushHistory = HistoryItem[];
type DebugID = number;

interface HistoryItem {
  duration: number;
  measurements: Measurement[];
  operations: Operation[];
  treeSnapshot: TreeSnapshot;
}

interface Measurement {
  timerType: TimerType;
  instanceID: DebugID;
  duration: number;
}

type TimerType = 
  | 'ctor'
  | 'render'
  | 'componentWillMount'
  | 'componentWillUnmount'
  | 'componentWillReceiveProps'
  | 'shouldComponentUpdate'
  | 'componentWillUpdate'
  | 'componentDidUpdate'
  | 'componentDidMount';

interface TreeSnapshot {
  [key: DebugID]: {
    displayName: string;
    text: string;
    updateCount: number;
    childIDs: DebugID[];
    ownerID: DebugID;
    parentID: DebugID;
  };
}

interface Operation {
  instanceID: DebugID;
  type: string;
  payload: any;
}

// Statistics returned by get* methods
interface ExclusiveStats {
  key: string;
  instanceCount: number;
  counts: { [timerType: string]: number };
  durations: { [timerType: string]: number };
  totalDuration: number;
}

interface InclusiveStats {
  key: string;
  instanceCount: number;
  inclusiveRenderDuration: number;
  renderCount: number;
}

interface WastedStats {
  key: string;
  instanceCount: number;
  inclusiveRenderDuration: number;
  renderCount: number;
}

interface OperationStats {
  flushIndex: number;
  instanceID: DebugID;
  key: string;
  type: string;
  ownerID: DebugID;
  payload: any;
}

Usage Examples

Basic Profiling Workflow

import Perf from 'react-addons-perf';

// Start measurement
Perf.start();

// Trigger React renders
ReactDOM.render(<MyApp />, container);

// Stop measurement
Perf.stop();

// Analyze results - most useful first
Perf.printWasted();    // Identify unnecessary re-renders
Perf.printInclusive(); // See total render times including children
Perf.printExclusive(); // See render times excluding children
Perf.printOperations(); // See actual DOM changes

Programmatic Analysis

import Perf from 'react-addons-perf';

// Collect measurements
Perf.start();
// ... React operations ...
Perf.stop();

// Get raw data for custom analysis
const measurements = Perf.getLastMeasurements();
const wasted = Perf.getWasted(measurements);

// Find components with most wasted time
const topWasted = wasted
  .sort((a, b) => b.inclusiveRenderDuration - a.inclusiveRenderDuration)
  .slice(0, 5);

console.log('Top 5 components with wasted renders:', topWasted);

Multiple Profiling Sessions

import Perf from 'react-addons-perf';

// First session
Perf.start();
// ... first set of operations ...
Perf.stop();
const firstSession = Perf.getLastMeasurements();

// Second session
Perf.start();
// ... second set of operations ...
Perf.stop();
const secondSession = Perf.getLastMeasurements();

// Compare sessions
console.log('First session wasted:', Perf.getWasted(firstSession));
console.log('Second session wasted:', Perf.getWasted(secondSession));

Important Notes

Development-Only Tool

React Addons Perf only works in development builds of React. In production builds:

All methods return safe default values (false, [], undefined)
A warning is displayed once per session when methods are called
No performance overhead is introduced

Performance Impact

The profiler itself introduces some performance overhead during measurement. Use it only when actively debugging performance issues, not in production.

Browser Console Integration

The print* methods use console.table() to display formatted results. Ensure your browser's developer tools are open to see the output.

Wasted Renders Analysis

printWasted() and getWasted() are typically the most useful methods as they identify components that re-rendered without producing DOM changes - the primary optimization target for React applications.