React Performance Optimization — Speed Up Your App

React.memo

const ExpensiveList = memo(function ExpensiveList({ items }) {
  return <ul>{items.map(item => <li key={item.id}>{item.name}</li>)}</ul>;
});

Code Splitting with React.lazy

import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </Suspense>
  );
}

Virtual Lists for Large Data

import { useVirtualizer } from '@tanstack/react-virtual';

function VirtualList({ items }) {
  const parentRef = useRef(null);
  const virtualizer = useVirtualizer({
    count: items.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 50,
  });
  
  return (
    <div ref={parentRef} style={{ height: '500px', overflow: 'auto' }}>
      {virtualizer.getVirtualItems().map(row => (
        <div key={row.key} style={{ position: 'absolute', top: row.start }}>
          {items[row.index].name}
        </div>
      ))}
    </div>
  );
}

Performance Checklist

• Profile with React DevTools Profiler
• Use React.memo for expensive components
• Memoize expensive computations with useMemo
• Code splitting with React.lazy
• Virtual scrolling for long lists
• Never use index as key for dynamic lists