How to measure performance in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Measuring React performance is essential for identifying bottlenecks and optimizing render times. As the creator of CoreUI with 25 years of performance optimization experience, I’ve profiled React applications handling millions of interactions to ensure sub-100ms response times.
The most effective approach combines React DevTools Profiler for component-level analysis with the Performance API for precise timing measurements.
React DevTools Profiler
Install React DevTools browser extension and use the Profiler tab:
// Wrap your app or specific components
import { Profiler } from 'react'
function onRenderCallback(
id,
phase,
actualDuration,
baseDuration,
startTime,
commitTime
) {
console.log('Component:', id)
console.log('Phase:', phase)
console.log('Actual duration:', actualDuration)
console.log('Base duration:', baseDuration)
}
function App() {
return (
<Profiler id="App" onRender={onRenderCallback}>
<YourComponent />
</Profiler>
)
}
Performance API
Measure specific operations:
import { useState, useEffect } from 'react'
function ExpensiveComponent() {
const [data, setData] = useState([])
useEffect(() => {
performance.mark('data-fetch-start')
fetch('/api/data')
.then(res => res.json())
.then(result => {
performance.mark('data-fetch-end')
performance.measure(
'data-fetch',
'data-fetch-start',
'data-fetch-end'
)
const measure = performance.getEntriesByName('data-fetch')[0]
console.log('Fetch took:', measure.duration, 'ms')
setData(result)
})
}, [])
return <div>{/* render data */}</div>
}
Custom Performance Hook
Create src/hooks/usePerformance.js:
import { useEffect, useRef } from 'react'
export const usePerformance = (componentName) => {
const renderCount = useRef(0)
const startTime = useRef(performance.now())
useEffect(() => {
renderCount.current++
const renderTime = performance.now() - startTime.current
console.log(`${componentName} render #${renderCount.current}: ${renderTime.toFixed(2)}ms`)
startTime.current = performance.now()
})
return renderCount.current
}
Use in components:
function MyComponent() {
const renderCount = usePerformance('MyComponent')
return <div>Rendered {renderCount} times</div>
}
Measure Component Render Time
const measureRender = (Component) => {
return (props) => {
const startTime = performance.now()
useEffect(() => {
const renderTime = performance.now() - startTime
if (renderTime > 16) {
console.warn(`Slow render: ${Component.name} took ${renderTime.toFixed(2)}ms`)
}
})
return <Component {...props} />
}
}
export default measureRender(ExpensiveComponent)
Production Monitoring
Send metrics to analytics:
function App() {
const reportPerformance = (id, phase, actualDuration) => {
if (actualDuration > 100) {
// Send to analytics
fetch('/api/metrics', {
method: 'POST',
body: JSON.stringify({
component: id,
phase,
duration: actualDuration,
timestamp: Date.now()
})
})
}
}
return (
<Profiler id="App" onRender={reportPerformance}>
<YourApp />
</Profiler>
)
}
Performance Budget
Set performance thresholds:
const PERFORMANCE_BUDGET = {
render: 16,
interaction: 100,
fetch: 1000
}
const checkBudget = (metric, duration) => {
if (duration > PERFORMANCE_BUDGET[metric]) {
console.error(`Performance budget exceeded: ${metric} took ${duration}ms (budget: ${PERFORMANCE_BUDGET[metric]}ms)`)
}
}
Best Practice Note
This is the same performance measurement strategy we use in CoreUI’s React components to ensure consistent sub-16ms render times for 60fps animations. React DevTools Profiler identifies which components re-render unnecessarily, while the Performance API provides precise timing for optimizations.
For production applications, consider using CoreUI’s React Admin Template which includes pre-configured performance monitoring and optimization out of the box.
Related Articles
If you’re optimizing performance, you might also want to learn how to use React DevTools for component inspection and debugging.
