14Performance Optimization with memo and useCallback
Why Optimize Performance?
As React apps grow, too many unnecessary re-renders can slow things down. Performance optimization helps your app feel faster and more responsive without rewriting entire components.
React.memo – Prevent Re-renders
React.memo is a higher-order component that prevents a component from re-rendering unless its props change.
import React from 'react'
const Button = React.memo(function Button({ onClick, label }) {
console.log('Button rendered')
return <button onClick={onClick}>{label}</button>
})
export default ButtonThis button won't re-render unless the `label` or `onClick` props change.
useCallback – Memoize Functions
Functions in React are recreated on every render, which can trigger child components to re-render. useCallback solves this by memoizing function references.
import { useState, useCallback } from 'react'
import Button from './Button'
function App() {
const [count, setCount] = useState(0)
const handleClick = useCallback(() => {
setCount(c => c + 1)
}, [])
return (
<div>
<p>Count: {count}</p>
<Button onClick={handleClick} label="Increase" />
</div>
)
}
export default AppuseMemo – Optimize Expensive Calculations
useMemo is used to memoize heavy computations so they don't run on every render.
import { useMemo, useState } from 'react'
function HeavyCalculation({ number }) {
const result = useMemo(() => {
console.log('Running expensive calculation...')
return number * 1000
}, [number])
return <p>Result: {result}</p>
}
export default HeavyCalculation- Use React.memo for pure components
- Use useCallback to avoid function re-renders
- Use useMemo for expensive operations
- Don't over-optimize—only use these when needed
Mini Project Step
Optimize your `FeatureList.jsx` by wrapping it with React.memo and using useCallback in the parent to avoid unnecessary re-renders when adding new features.
// FeatureList.jsx
import React from 'react'
function FeatureList({ features }) {
console.log('FeatureList rendered')
return (
<ul>
{features.map((f, i) => <li key={i}>{f}</li>)}
</ul>
)
}
export default React.memo(FeatureList)