Enhancing Performance with React Profiler

Introducing React Profiler

React’s Profiler helps you measure:

- Which components render too often
- How long renders take
- What triggered renders

Using Profiler in Code

import { Profiler } from 'react'
function MyApp({ Component, pageProps }) {
const onRender = (id, phase, actualTime) => {
console.log(`${id} [${phase}]: ${actualTime.toFixed(2)}ms`)
}
return (
<Profiler id="App" onRender={onRender}>
<Component {...pageProps} />
</Profiler>
)
}

Profiling with DevTools

1. Open React DevTools → Profiler tab
2. Record user interactions
3. Inspect “flamegraphs” and “ranked charts”

Common Bottlenecks

- Unnecessary state updates
- Re‑rendering large trees
- Heavy computations in render

Optimization Techniques

- useMemo / useCallback
- Component memoization (React.memo)
- Code splitting with dynamic imports

Wrap Up

Regular profiling ensures your app stays snappy as it grows.