Difference Between useMemo and useCallback

In this blog we will discuss about the Difference Between useMemo and useCallback hooks in React with practice example. useMemo and useCallback both are hooks. it is use for a performance optimize of the react application. useMemo is used for a memorize result/value and useCallback is a memorize function.

In this image I am showing the Difference between useMemo and useCallback with Remember, save, think, example.

Many developers have questions like:

Difference between useMemo and useCallback

When should I use which hook?

First we will discuss about the what is useMemo? and then what is the useCallback?

What is useMemo?

useMemo is used when you want React to remember a calculated result so it doesn’t have to think again every time the screen refreshes.

useMemo is not re-calculations of values on every render. until is is dependency array change.

It is use for a memorize value.

useMemo return a calculated value.

It is use for a Heavy calculation.

For example :- Data filter, Calculation, Data transformation, pagination.

import { useState, useMemo } from "react";

function SalaryCalculator() {
  const [hours, setHours] = useState(8);
  const [rate, setRate] = useState(1000);
  const [theme, setTheme] = useState("light");

  const salary = useMemo(() => {
    console.log("Salary calculation running...");
    return hours * rate;
  }, [hours, rate]);

  return (
    <div>
      <h2>Daily Salary: ₹{salary}</h2>

      <button onClick={() => setHours(hours + 1)}>
        Increase Hours
      </button>

      <button onClick={() => setRate(rate + 50)}>
        Increase Rate
      </button>

      <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
        Change Theme
      </button>
    </div>
  );
}

export default SalaryCalculator;

In this example we have a state hours and rate, salary is a userMemo hooks. and it is return the calculation of hours * rate. it is not recalculation value until rate or hours state change. if one of the state change then it is recalculate the value and retender the UI. If user only change the Theme so salary is not recalculation and render.

Calculation hours * rate = salary.

Runs only when hours or rate changes.

Changing theme does NOT run calculation.

What is useCallback?

useCallback is used when you want React to remember a function so it doesn’t create a new one on every screen refresh.

useCallback is nor re-creation of a function on every render. unit it is dependency change.

It is use for memorize function.

useCallback return function.

It is a use for function pass as props.

For example :- Passing function to child component, Button click handlers.

import { useState, useCallback, memo } from "react";

const MuteButton = memo(({ onMute }) => {
  console.log("Mute button rendered");
  return <button onClick={onMute}>Mute</button>;
});

function MusicPlayer() {
  const [song, setSong] = useState("Song A");

  const muteSound = useCallback(() => {
    console.log("Sound muted");
  }, []);

  return (
    <div>
      <p>Now Playing: {song}</p>

      <button onClick={() => setSong("Song B")}>
        Change Song
      </button>

      <MuteButton onMute={muteSound} />
    </div>
  );
}

export default MusicPlayer;

In this example we have a change song and a mute button. Whenever the song changes, it re-renders the parent MusicPlayer component. At that time the mute button is not re-rendered. React does not create a new function for the mute button.

In sort, The song has changed, but the mute is the same. this example is perfect understanding for useCallback hooks.

Difference between useMemo and useCallback.

useMemo	useCallback
Remembers: A Result	Remembers: A Function
Saves: Recalculation	Saves: Recreating Function
Think: I Know the Answer!	Think: I Know the Steps!
For Example: Salary | Total | Full Name	For Example: Mute | Save | Submit
Store: Value	Store : Function

In this table we have showing the Difference between useMemo and useCallback with tabular format for better understanding and interview preparations.

If you are preparing the interview question i recommend to you read this interview questions and answers