← Back to Blog

React Performance Optimization Techniques

By Stanley Hayford · March 8, 2025

Identifying Performance Bottlenecks

Before optimizing, measure. Use React DevTools Profiler to find components that re-render unnecessarily.

Memoization

React.memo

Wrap components that receive the same props frequently:

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

useMemo & useCallback

const sortedItems = useMemo(
  () => items.sort((a, b) => a.name.localeCompare(b.name)),
  [items]
);

const handleClick = useCallback((id: string) => {
  setSelected(id);
}, []);

Virtualization

For long lists (1000+ items), use virtualization libraries like react-window or @tanstack/virtual. Only render visible items.

Code Splitting

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

<Suspense fallback={<Loading />}>
  <Dashboard />
</Suspense>

Key Takeaways

1. Don't optimize prematurely — measure first
2. Memoize expensive computations and stable callbacks
3. Virtualize long lists
4. Split code at route boundaries
5. Keep state as local as possible

Tags: React, Performance, Frontend, JavaScript