If you’ve worked with React for a while, you’ve probably heard about useMemo. It’s often mentioned in performance discussions—but many developers either overuse it or avoid it entirely due to confusion.

Let’s break it down in a simple, practical way so you can use it confidently (and correctly).

What is useMemo in React?

At its core useMemo is a performance optimisation hook.

It stores (or caches) the result of a computation and only recalculates it when its dependencies change. This helps avoid repeating expensive work on every render.

const memoizedValue = useMemo(() => {
  return computeSomething();
}, [dependencies]);

How it works:

• On the first render → function runs, and the result is stored
• On re-render → React checks dependencies
• If dependencies haven’t changed → cached value is reused

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "lh3.googleusercontent.com",
      },
    ],
  },
};

export default nextConfig;