React Performance Optimization: From Good to Great

React apps can become sluggish over time — not because React is slow, but because of how we use it. In this post, we'll explore the most impactful optimizations you can apply today.

Why React Re-renders

React re-renders a component when:

• Its state changes
• Its props change (by reference)
• Its parent re-renders

The key insight: most performance issues come from unnecessary re-renders — renders triggered by reference changes, not value changes.

1. useMemo and useCallback

// Before — new reference on every render
const filteredItems = items.filter(item => item.active);
// After — memoized
const filteredItems = useMemo(
  () => items.filter(item => item.active),
  [items]
);

Use useCallback for functions you pass as props to memoized children:

const handleClick = useCallback((id: string) => {
  dispatch({ type: "SELECT", payload: id });
}, [dispatch]);

2. React.memo for Pure Components

Wrap components that receive the same props frequently:

const ListItem = React.memo(({ item }: { item: Item }) => (
  <li>{item.name}</li>
));

3. Code Splitting

Use dynamic imports for heavy components:

const HeavyChart = dynamic(() => import('./HeavyChart'), {
  loading: () => <Skeleton />,
  ssr: false,
});

Key Takeaways

• Profile first with React DevTools before optimizing
• useMemo is for expensive computations, not all values
• React.memo only helps when props are stable references
• Code splitting should be your first win — it's free