React Performance Optimization: 10 Proven Techniques

After optimizing React applications across fintech, automotive, and travel domains, I've identified the techniques that deliver the biggest performance wins. Here are 10 proven optimization strategies.

1. React.memo for Component Memoization

Wrap components that receive the same props frequently to prevent unnecessary re-renders.

const ExpensiveList = React.memo(({ items }: { items: Item[] }) => {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
});

2. useMemo for Expensive Computations

Cache the results of expensive calculations.

function Dashboard({ transactions }: Props) {
  const totalRevenue = useMemo(
    () => transactions.reduce((sum, t) => sum + t.amount, 0),
    [transactions]
  );

  return <span>{totalRevenue}</span>;
}

3. useCallback for Stable References

Prevent child re-renders caused by new function references.

function ParentComponent() {
  const handleClick = useCallback((id: string) => {
    // handle click
  }, []);

  return <ChildComponent onClick={handleClick} />;
}

4. Code Splitting with React.lazy

Load components only when they're needed.

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

function Analytics() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <HeavyChart />
    </Suspense>
  );
}

5. Virtualize Long Lists

Render only visible items for large datasets.

import { FixedSizeList } from 'react-window';

function UserList({ users }: { users: User[] }) {
  return (
    <FixedSizeList
      height={600}
      itemCount={users.length}
      itemSize={50}
    >
      {({ index, style }) => (
        <div style={style}>{users[index].name}</div>
      )}
    </FixedSizeList>
  );
}

6. Debounce User Input

Prevent excessive re-renders from rapid input changes.

7. Optimize Context Usage

Split contexts to prevent unnecessary re-renders across the component tree.

8. Use the key Prop Strategically

Force component remounting when data changes fundamentally.

9. Lazy Load Images

Use the native loading="lazy" attribute or Intersection Observer.

10. Profile with React DevTools

Always measure before optimizing. Use the React Profiler to identify actual bottlenecks.

Key Takeaways

• Always measure performance before optimizing
• Focus on the techniques that address your specific bottlenecks
• React.memo and useMemo are your most-used tools
• Code splitting has the biggest impact on initial load time
• Virtualization is essential for large datasets

These techniques have helped me build applications processing millions of transactions with smooth, responsive UIs.

---

Originally published at umesh-malik.com