useMemo hook in React - Performance & Optimization

Performance: useMemo hook

MEDIUM IMPACT

This affects the rendering speed and responsiveness by avoiding unnecessary recalculations during component renders.

Optimizing expensive calculations inside a React functional component

React

import { useMemo } from 'react';
function Component({items}) {
  const total = useMemo(() => items.reduce((sum, item) => sum + item.value, 0), [items]);
  return <div>Total: {total}</div>;
}

Calculation runs only when items change, reducing CPU load and speeding up renders.

📈 Performance GainReduces CPU work and improves INP by avoiding redundant recalculations

Optimizing expensive calculations inside a React functional component

React

function Component({items}) {
  const total = items.reduce((sum, item) => sum + item.value, 0);
  return <div>Total: {total}</div>;
}

The calculation runs on every render even if items haven't changed, causing unnecessary CPU work and slower interaction.

📉 Performance CostBlocks rendering for each render, increasing INP and CPU usage

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Without useMemo	No change	Multiple reflows if calculation triggers state changes	Higher paint cost due to slower JS	[X] Bad
With useMemo	No change	Single reflow if dependencies change	Lower paint cost due to cached results	[OK] Good

Rendering Pipeline

useMemo caches the result of a calculation between renders, so React skips recalculating the value if dependencies haven't changed.

→JavaScript Execution

⚠️ BottleneckJavaScript Execution when recalculations are expensive

Core Web Vital Affected

INP

This affects the rendering speed and responsiveness by avoiding unnecessary recalculations during component renders.

Optimization Tips

1Use useMemo to cache expensive calculations that depend on specific inputs.

2Avoid useMemo for cheap or simple calculations to prevent unnecessary overhead.

3Always include all dependencies in the useMemo dependency array to avoid stale values.

Performance Quiz - 3 Questions

What is the main performance benefit of using useMemo in React?

A It caches expensive calculations to avoid repeating them on every render.

B It delays rendering until the user interacts with the component.

C It reduces the size of the JavaScript bundle.

D It automatically batches multiple state updates.

DevTools: Performance

How to check: Record a performance profile while interacting with the component. Look for long scripting tasks caused by recalculations.

What to look for: Reduced scripting time and fewer recalculations when props/state do not change indicate good useMemo usage.