React Performance

Why Performance Matters

Let's be real — nobody likes a sluggish app. When your React app takes forever to render, users don't sit around patiently. They close the tab and never come back.

React is fast by default. Most of the time, if your app feels slow, it's not React's fault. It's usually unnecessary re-renders, heavy computations on every render, or components doing way more work than they need to.

The good news? A few targeted optimizations can make a world of difference. You don't need to overthink it — just know the common pitfalls and how to avoid them.

Common Performance Killers

The biggest culprit is unnecessary re-renders. When a parent component re-renders, all its children re-render too — even if their props haven't changed. Imagine painting your entire house because you changed a lightbulb in one room.

function ExpensiveList({ items }) {
  console.log("ExpensiveList rendered");
  return items.map(item => <li key={item.id}>{item.name}</li>);
}

function Parent() {
  const [count, setCount] = useState(0);
  const items = [{ id: 1, name: "React" }, { id: 2, name: "Vue" }];

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
      <ExpensiveList items={items} />
    </div>
  );
}

Every time you click that button, ExpensiveList re-renders even though items haven't changed. That's wasteful. The fix? Wrap ExpensiveList with React.memo so it only re-renders when its props actually change.

Profiling Tools

Before you start optimizing, figure out what's actually slow. React Developer Tools has a Profiler tab that shows you exactly which components are rendering and how long they take.

You can also use React.Profiler in your code to measure render times programmatically. It's like having a speedometer for your components.

function App() {
  return (
    <Profiler id="Dashboard" onRender={(id, phase, duration) => {
      console.log(`${id} took ${duration}ms`);
    }}>
      <Dashboard />
    </Profiler>
  );
}

Always profile first, optimize second. Don't guess where the bottleneck is — let the tools tell you. You might be surprised at what's actually causing the slowdown.

Quick Optimization Tips

Here are the low-hanging fruit. Use React.memo for components that render the same output given the same props. Use useMemo for expensive calculations that don't need to run on every render.

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

Use useCallback when you're passing functions as props to memoized components. It prevents the function from being recreated on every render.

And the simplest tip of all: keep your component tree shallow. Deeply nested components that re-render cascade updates through the entire tree. Flattening your component structure can eliminate performance issues before they even start.