Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Profiling helps you identify performance bottlenecks by measuring how long components take to render and how often they re-render. Don't guess—measure!
See render times and counts for different components
// Performance tracker hook
function useRenderTime(componentName) {
const [renderCount, setRenderCount] = React.useState(0);
const [lastRenderTime, setLastRenderTime] = React.useState(0);
const startTimeRef = React.useRef(Date.now());
React.useEffect(() => {
const renderTime = Date.now() - startTimeRef.current;
setLastRenderTime(renderTime);
setRenderCount(prev => prev + 1);
startTimeRef.current = Date.now();
});
return { renderCount, lastRenderTime };
}
// Fast component
function FastComponent({ count }) {
const { renderCount, lastRenderTime } = useRenderTime('FastComponent');
return (
<div className="component fast">
<h3>⚡ Fast Component</h3>
<p className="value">Count: {count}</p>
<div className="stats">
<div className="stat">
<span>Renders:</span>
<strong>{renderCount}</strong>
</div>
<div className="stat">
<span>Last render:</span>
<strong className="fast">{lastRenderTime}ms</strong>
</div>
</div>
</div>
);
}
// Slow component (expensive calculation)
function SlowComponent({ count }) {
const { renderCount, lastRenderTime } = useRenderTime('SlowComponent');
// Simulate expensive calculation
const expensiveValue = React.useMemo(() => {
let result = 0;
for (let i = 0; i < 1000000; i++) {
result += Math.random();
}
return result;
}, [count]);
return (
<div className="component slow">
<h3>🐢 Slow Component</h3>
<p className="value">Count: {count}</p>
<div className="stats">
<div className="stat">
<span>Renders:</span>
<strong>{renderCount}</strong>
</div>
<div className="stat">
<span>Last render:</span>
<strong className="slow">{lastRenderTime}ms</strong>
</div>
</div>
<p className="note">Expensive calculation: {expensiveValue.toFixed(0)}</p>
</div>
);
}
// Optimized component with memo
const OptimizedComponent = React.memo(function Component({ count }) {
const { renderCount, lastRenderTime } = useRenderTime('OptimizedComponent');
return (
<div className="component optimized">
<h3>✨ Optimized Component</h3>
<p className="value">Count: {count}</p>
<div className="stats">
<div className="stat">
<span>Renders:</span>
<strong>{renderCount}</strong>
</div>
<div className="stat">
<span>Last render:</span>
<strong className="optimized">{lastRenderTime}ms</strong>
</div>
</div>
<p className="note">✅ Uses React.memo</p>
</div>
);
});
function App() {
const [count, setCount] = React.useState(0);
const [unrelated, setUnrelated] = React.useState(0);
return (
<div className="demo-app">
<div className="header">
<h2>📊 Performance Profiler</h2>
<p>Monitor render times and counts</p>
</div>
<div className="controls">
<button onClick={() => setCount(count + 1)} className="primary">
Update Count ({count})
</button>
<button onClick={() => setUnrelated(unrelated + 1)} className="secondary">
Update Unrelated ({unrelated})
</button>
</div>
<div className="components-grid">
<FastComponent count={count} />
<SlowComponent count={count} />
<OptimizedComponent count={count} />
</div>
<div className="info">
<h4>💡 Performance Tips:</h4>
<ul>
<li>⚡ Fast component renders quickly</li>
<li>🐢 Slow component has expensive calculation (but uses useMemo)</li>
<li>✨ Optimized component skips re-renders with React.memo</li>
<li>📊 Click "Update Unrelated" - only optimized skips render!</li>
</ul>
</div>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);Loading preview...
Using React DevTools Profiler
// 1. Install React DevTools
// Chrome: https://chrome.google.com/webstore
// Firefox: https://addons.mozilla.org/firefox
// 2. Open DevTools and click "Profiler" tab
// 3. Click record button (🔴)
// 4. Perform actions in your app
// 5. Click stop button (⏹️)
// 6. Analyze the results:
// - Flamegraph shows component hierarchy
// - Color intensity = render time
// - Yellow/red = slow components
// - Click components to see details
// 7. Look for:
// - Unnecessary re-renders
// - Expensive components
// - Components that render too oftenPress
💡 The Performance tab shows detailed timing of all browser activities including JavaScript execution, rendering, and painting.
Click the record button
Recording Tips:
Understand the visual timeline and identify bottlenecks
🔵 Blue - Loading
Network requests, resource loading
🟡 Yellow - Scripting
JavaScript execution (your code!)
🟣 Purple - Rendering
Layout calculations, style recalculation
🟢 Green - Painting
Drawing pixels to screen
Find the most expensive functions
Bottom-Up shows: Functions sorted by time spent (self time). Start optimizing from the top!
Call Tree shows: Function call hierarchy. Expand nodes to see what called what!
✨ Shows components sorted by render time - start optimizing from #1!
Click any component to see WHY it re-rendered:
💡 Fix: Use React.memo or useMemo to prevent unnecessary re-renders from reference changes!
Don't optimize blindly—profile to find real issues
React DevTools Profiler is your best friend
Optimize components that matter most
Verify optimizations actually improved performance