React Performance Optimization

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