14. Performance Optimization with memo and useCallback

Level: IntermediateDuration: 20m

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.

jsx

import React from 'react'

const Button = React.memo(function Button({ onClick, label }) {
  console.log('Button rendered')
  return <button onClick={onClick}>{label}</button>
})

export default Button

This 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.

jsx

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 App

useMemo – Optimize Expensive Calculations

useMemo is used to memoize heavy computations so they don't run on every render.

jsx

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.

jsx

// 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)

Page

Why Optimize Performance?

React.memo – Prevent Re-renders

useCallback – Memoize Functions

useMemo – Optimize Expensive Calculations

Mini Project Step