A React package to track and visualize component lifecycle events, state changes, and effects globally
npm install react-lifecycle-trackerbash
npm install react-lifecycle-tracker
or
yarn add react-lifecycle-tracker
`
Quick Start
Wrap your app with the LifecycleTracker provider:
`jsx
import { LifecycleTracker } from 'react-lifecycle-tracker';
function App() {
return (
config={{
enabled: true,
showOverlay: true,
logToConsole: true,
}}
>
);
}
`
Component Tracking
Track individual components to see what causes re-renders:
`jsx
import { useComponentTracker } from 'react-lifecycle-tracker';
function MyComponent({ userId, theme }) {
const [count, setCount] = useState(0);
const [isActive, setIsActive] = useState(false);
// Track this component
useComponentTracker({
name: 'MyComponent',
props: { userId, theme },
state: { count, isActive }
});
return ...;
}
`
Configuration
`jsx
config={{
enabled: true, // Enable/disable tracking
showOverlay: true, // Show visual overlay
logToConsole: false, // Log events to console
includeTimings: true, // Include performance timings
maxHistorySize: 50, // Max changes to keep in history
onEvent: (event) => { // Custom event handler
console.log(event);
},
onComponentUpdate: (update) => { // Custom component update handler
console.log(update);
}
}}
>
`
Overlay Features
$3
- Shows React Profiler events (mount/update/nested-update)
- Displays render duration in milliseconds
- Tracks all components in the tree automatically
$3
- Shows individual component updates with causes:
- ðĒ mount - Component first rendered
- ð props-change - Props changed (shows which props)
- ðĩ state-change - Internal state changed
- ðĢ parent-render - Parent re-rendered
- ð· context-change - Context value changed
- Shows render count for each component
- Lists which props/state changed
- Click to expand - See detailed inspector view
$3
- Current Props - All current prop values
- State Timeline - Complete history of state changes with:
- Variable name
- Old value â New value (color-coded)
- Timestamp of change
- Props Timeline - Complete history of prop changes
- Update History - Last updates with causes and changes
Optional Hooks
While tracking happens automatically, you can optionally access events from within components:
`jsx
import { useLifecycleEvents } from 'react-lifecycle-tracker';
function MyComponent() {
const { events, clearEvents } = useLifecycleEvents();
return (
Total renders: {events.length}
);
}
`
Event Structure
$3
`typescript
interface LifecycleEvent {
id: string;
componentName: string;
phase: 'mount' | 'update' | 'nested-update';
timestamp: number;
duration: number;
baseDuration?: number;
startTime?: number;
interactions: Set;
}
`
$3
`typescript
interface ComponentUpdate {
componentName: string;
cause: 'mount' | 'props-change' | 'state-change' | 'parent-render' | 'context-change';
renderCount: number;
timestamp: number;
changedProps?: string[];
stateChanges?: string[];
currentProps?: Record;
currentState?: Record;
}
`
$3
`typescript
interface ValueChange {
key: string;
oldValue: unknown;
newValue: unknown;
timestamp: number;
}
`
Use Cases
- ð Debugging - Understand why components re-render and track down issues
- ð Learning - Visualize React's lifecycle for educational purposes
- ⥠Performance - Identify slow renders and optimization opportunities
- ð Monitoring - Track component behavior in development
- ð Analysis - See how state and props evolve over time
TypeScript Support
Fully typed with TypeScript. All types are exported:
`typescript
import type {
LifecycleEvent,
ComponentUpdate,
TrackerConfig,
UpdateCause,
ComponentSnapshot,
ValueChange
} from 'react-lifecycle-tracker';
``