React Performance Optimization

⏱ Estimated reading time: 2 min

React is fast by default, but performance issues can appear in large or complex applications. Optimizing React improves speed, responsiveness, and user experience.

Common Causes of Performance Issues

• Unnecessary re-renders

• Large component trees

• Expensive calculations on every render

• Inefficient state management

• Large bundle sizes

1. Prevent Unnecessary Re-renders

React.memo

Memoizes a component and prevents re-render if props don’t change.

const Button = React.memo(({ onClick, label }) => {
  return <button onClick={onClick}>{label}</button>;
});

2. Optimize with useCallback

Memoizes functions to avoid re-creation on every render.

const handleClick = useCallback(() => {
  setCount(c => c + 1);
}, []);

Useful when passing callbacks to memoized components.

3. Optimize with useMemo

Memoizes expensive calculations.

const total = useMemo(() => {
  return items.reduce((sum, item) => sum + item.price, 0);
}, [items]);

4. Code Splitting & Lazy Loading

Load components only when needed.

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

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

5. Avoid Inline Functions & Objects

❌ Causes re-renders:

<button onClick={() => doSomething()} />

✅ Better:

const handleClick = () => doSomething();
<button onClick={handleClick} />

6. Key Optimization in Lists

• Use stable, unique keys

• Avoid array index as key

id}>{item.name}

7. Virtualization for Large Lists

Render only visible items.

Libraries:

• react-window

• react-virtualized

8. Optimize State Management

• Keep state local when possible

• Avoid unnecessary global state

• Split large states into smaller pieces

9. Debouncing & Throttling

Reduce frequent updates (e.g., search input).

useEffect(() => {
  const timeout = setTimeout(() => search(query), 300);
  return () => clearTimeout(timeout);
}, [query]);

10. Use Production Build

npm run build

• Minified

• Optimized

• Faster load times

11. Avoid Overusing Context

• Context causes re-render of all consumers

• Split contexts if needed

12. Measure Performance

Tools:

• React DevTools Profiler

• Chrome Performance tab

• Lighthouse

Best Practices Summary

• Memoize components and functions

• Lazy load routes and components

• Use proper keys

• Minimize state and re-renders

• Measure before optimizing

Key Takeaways

• Optimize only when needed

• Focus on re-render reduction

• Use memoization wisely

• Measure performance regularly