Why useMemo hook in React? - Purpose & Use Cases

The Big Idea

What if your app could skip heavy work and feel instantly responsive every time you click?

The Scenario

Imagine you have a React app that does a heavy calculation every time it renders, even if the input data hasn't changed. This slows down your app and makes it feel laggy.

The Problem

Without optimization, React runs all functions on every render, wasting time and CPU. This can cause slow UI updates and poor user experience, especially on complex pages.

The Solution

The useMemo hook remembers the result of a calculation and only recalculates it when its inputs change. This keeps your app fast and smooth by skipping unnecessary work.

Before vs After

✗ Before

const result = heavyCalculation(data); // runs every render

✓ After

const result = React.useMemo(() => heavyCalculation(data), [data]); // runs only when data changes

What It Enables

useMemo lets your React app run expensive calculations efficiently, improving speed and responsiveness.

Real Life Example

Think of a shopping site that filters thousands of products. useMemo helps recalculate filtered lists only when the filter changes, not on every click.

Key Takeaways

Manual recalculations slow down React apps.

useMemo caches results to avoid repeated work.

This leads to faster, smoother user experiences.