Performance Optimization

55 min

React provides several tools for optimizing performance, including `React.memo`, `useMemo`, `useCallback`, and `useRef`.

`React.memo` prevents unnecessary re-renders of components when their props haven't changed.

`useMemo` and `useCallback` help optimize expensive calculations and prevent unnecessary re-renders.

Performance optimization should be done after identifying actual bottlenecks. Premature optimization can make code harder to maintain.

React.memo does a shallow comparison of props by default. For deep comparisons, you can provide a custom comparison function.

useMemo caches computed values, while useCallback caches function references. Both help prevent unnecessary recalculations and re-renders.

Key Concepts

React.memo prevents re-renders when props haven't changed.
useMemo caches expensive calculations.
useCallback caches function references to prevent child re-renders.
Performance optimization should target actual bottlenecks.
Shallow comparison is the default for React.memo.

Learning Objectives

Master

Using React.memo to prevent unnecessary re-renders
Optimizing expensive calculations with useMemo
Caching function references with useCallback
Identifying performance bottlenecks with React DevTools Profiler

Develop

Performance optimization thinking
Understanding React's rendering behavior
Recognizing when optimization is needed vs premature

Tips

Use React DevTools Profiler to identify actual performance issues.
Only memoize components that are actually causing performance problems.
Remember that memoization has its own cost - don't overuse it.
Use useCallback for functions passed to memoized child components.

Common Pitfalls

Over-optimizing components that don't have performance issues.
Forgetting to include dependencies in useMemo/useCallback dependency arrays.
Using React.memo on components that re-render frequently anyway.
Creating unnecessary memoization that makes code harder to read.

Summary

React.memo prevents re-renders when props are unchanged.
useMemo caches expensive calculations.
useCallback caches function references.
Optimize only after identifying actual bottlenecks.

Exercise

Optimize a component using React.memo and useCallback.

import { useState, useCallback, memo } from 'react';

const ExpensiveComponent = memo(({ onIncrement }) => {
  console.log('ExpensiveComponent rendered');
  return <button onClick={onIncrement}>Increment</button>;
});

function ParentComponent() {
  const [count, setCount] = useState(0);
  
  const handleIncrement = useCallback(() => {
    setCount(c => c + 1);
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <ExpensiveComponent onIncrement={handleIncrement} />
    </div>
  );
}

Exercise Tips

Use React DevTools Profiler to measure the optimization impact.
Try removing memo and useCallback to see the difference.
Add console.logs to track when components re-render.
Consider using useMemo for expensive calculations in the parent.

Performance Optimization