Performance Optimization

React.memo, useMemo, useCallback, lazy loading, code splitting, and profiling.

Overview

Optimizing React apps prevents unnecessary re-renders and improves user experience.

Key Concepts

• React.memo — Memoizes component to skip re-renders when props haven't changed
• useMemo — Memoizes expensive calculations
• useCallback — Memoizes functions to prevent child re-renders
• React.lazy — Lazy-loads components for code splitting
• Profiler — Measures rendering performance

Code Examples

import { memo, useMemo, useCallback, lazy, Suspense } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

const MemoizedList = memo(function List({ items, onSelect }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id} onClick={() => onSelect(item.id)}>
          {item.name}
        </li>
      ))}
    </ul>
  );
});

function App() {
  const [filter, setFilter] = useState('');
  const items = useMemo(() => 
    allItems.filter(item => 
      item.name.toLowerCase().includes(filter.toLowerCase())
    ), [filter]);

  const handleSelect = useCallback((id) => {
    console.log('Selected:', id);
  }, []);

  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MemoizedList items={items} onSelect={handleSelect} />
    </Suspense>
  );
}

Practice

Profile a list component and optimize it to prevent re-renders on unrelated state changes.