React.memo vs useMemo vs useCallback: When Should You Use Them?

If you have worked with React for some time, chances are you have come across React.memo, useMemo, and useCallback and thought:

“Okay... all three are related to performance, but when do I actually use which one?”

And honestly, that confusion is real.

At first they can feel very similar because all three are used to optimize React applications.
But the real difference is in what exactly each one memoizes.

Once this clicks, the confusion becomes much smaller.

So in this article, let us break them down one by one in a simple way and understand when to use which one without overcomplicating it.

Why do we need them?

In React, when a component re-renders, its child components, functions, and calculated values may also get recreated.

Sometimes this is completely fine.
But in larger applications, repeated re-renders can affect performance.

That is where React.memo, useMemo, and useCallback can help.

What is React.memo?

React.memo is used to prevent a component from re-rendering if its props have not changed.

It works with functional components.

const Child = React.memo(({ name }) => {
  console.log("Child rendered");
  return <div>{name}</div>;
});

In this example, the Child component will only re-render if the name prop changes.

When to use React.memo?

Use React.memo when you have a functional component when:

• a component renders often
• the component receives the same props many times
• the component is expensive to render
• you want to avoid unnecessary child re-renders

What is useMemo?

useMemo is a React hook that memoizes the result of a function. It only recomputes the memoized value when one of its dependencies changes.

const cartTotal = useMemo(() => {
  // Some expensive calculation
   return cartItems.reduce((total, item) => total + item.price, 0);
}, [cartItems]);

In this example, the cartTotal will only be recalculated when cartItems changes.

When to use useMemo?

• you have expensive calculations
• you want to avoid recalculating values on every render
• you want to pass a stable computed value to child components

What is useCallback?

useCallback is a React hook that memoizes a function. It returns a memoized version of the callback function that only changes if one of its dependencies changes.

const handleClick = useCallback(() => {
  if(count > 100){
    // some logic here
  }
}, [count]);

In this example, the handleClick function will only be recreated if the count variable changes.

When to use useCallback?

• you pass a function as a prop to a child component
• the child component is wrapped with React.memo
• you want to keep the same function reference between renders

Short answer for your interview:

They all help with performance optimization, but they memoize different things:

• React.memo memoizes a component
• useMemo memoizes a value
• useCallback memoizes a function