Optimizing React Performance

Introduction

React performance issues rarely come from React itself. They usually come from how components are structured, how state is managed, and how often unnecessary re-renders happen.

In real projects, the problem shows up as slow UI updates, laggy interactions, and components re-rendering even when nothing meaningful has changed.

The Problem

A common issue is unnecessary re-rendering. When parent components update, child components re-render even if their data hasn’t changed.

function Parent({ count }) {
  return <Child value={count} />;
}

Even if value stays the same, the child still re-renders because the parent updated.

• Unnecessary re-renders increase CPU usage
• Large component trees amplify the issue
• UI becomes slow under frequent updates

System Design / Approach

The goal is not to prevent re-renders completely, but to ensure components update only when necessary.

• Memoize components where needed
• Stabilize function references
• Avoid unnecessary state updates
• Split large components into smaller units

Performance optimization is about reducing repeated work, not micro-optimizing everything.

Implementation

Step 1: Prevent Unnecessary Re-renders

Use React.memo to skip rendering when props don’t change.

const Child = React.memo(({ value }) => {
  return <div>{value}</div>;
});

The component now re-renders only when value changes.

Step 2: Stabilize Function References

Functions are recreated on every render, which can trigger unnecessary updates.

const handleClick = useCallback(() => {
  console.log("clicked");
}, []);

useCallback keeps function references stable across renders.

Step 3: Avoid Heavy Computation in Render

Expensive calculations inside render slow down the UI.

const result = useMemo(() => expensiveCalculation(data), [data]);

useMemo caches results and avoids unnecessary recomputation.

Step 4: Split Components

Large components re-render more often. Splitting reduces impact.

function Dashboard() {
  return (
    <>
      <UserProfile />
      <Notifications />
    </>
  );
}

Smaller components isolate updates and improve performance.

Trade-offs

Real-World Impact

• Smoother UI interactions
• Reduced CPU usage
• Improved responsiveness