useMemo() vs useCallback() in React

During our MentorBridge session, we learned about React Performance Optimization from our mentor, Senthil Kumar sir. He explained how to improve performance in React using useMemo() and useCallback() hooks.

I had one question: Why do we need to optimize a React application if it is already working correctly?

Imagine we are building a student management application. It displays a list of students, allows us to search for a student, and has a button to count the number of clicks.

At first, I think everything works fine. But as the application grows, some calculations may run unnecessarily, and functions may be created again whenever the component re-renders.

That’s where useMemo() and useCallback() become useful. Both hooks help improve performance in React.

But with React Compiler, starting from React 19, these memoization hooks are often unnecessary because the compiler can automatically memoize values, functions, and components. However, this hooks are still useful when we need more precise control over memoization.

What is useMemo()?

useMemo() is a React hook that helps us remember the result of a calculation between renders. React can reuse the previous result when the dependencies haven’t changed instead of running the calculation again.

Syntax

const highScorers = useMemo(() => {
  return students.filter(
    student => student.marks > 80
  );
}, [students]);

It takes two arguments: a calculation function and a dependency array.

React recalculates the result if a dependency array changes. If the dependencies array do not change, React can reuse the previous result.

Example without useMemo()

const students = [
  { name: "Arun", marks: 90 },
  { name: "Priya", marks: 75 },
  { name: "Kumar", marks: 85 },
  { name: "Divya", marks: 95 }
];

const highScorers = students.filter(
  student => student.marks > 80
);

console.log(highScorers);

This code checks each student’s marks and returns the students who scored above 80.

Now, imagine that we also have a counter on the same page. Whenever we click the Increment button, the counter changes and the component re-renders.

The student list hasn’t changed, the filtering calculation runs again.

So they have used useMemo(). It remembers the previous calculation result and recalculates it only when its dependencies change.

Get Bala Prasanna M’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

How does useMemo() help?

import React, { useState, useMemo } from "react";

const students = [
  { id: 1, name: "Arun", marks: 90 },
  { id: 2, name: "Priya", marks: 75 },
  { id: 3, name: "Kumar", marks: 85 },
  { id: 4, name: "Divya", marks: 95 }
];

function App() {
  const [count, setCount] = useState(0);

  const highScorers = useMemo(() => {
    console.log("Calculating high scorers...");

    return students.filter(
      student => student.marks > 80
    );
  }, []);

  return (
    <div>
      <h2>Student Dashboard</h2>

      <h3>High Scoring Students</h3>

      {highScorers.map(student => (
        <p key={student.id}> {student.name} - {student.marks} </p>
      ))}

      <h3>Counter: {count}</h3>

      <button onClick={() => setCount(count + 1)}> Increment </button>
    </div>
  );
}

export default App;

First, React calculates the students who scored above 80 and remembers the result. When we click Increment, the counter increases and the component re-renders. And then, the student list hasn’t changed, so React can reuse the previously calculated result.

It avoids repeating the filter() calculations in every counter update.

What is useCallback()?

useCallback() is a React hook that helps us remember a function between renders. Instead of creating a new function reference on every render, React can reuse the previous one when the dependencies remain the same.

Syntax

const handleClick = useCallback(() => {
  console.log("Button clicked");
}, []);

It takes two arguments: a function and a dependency array.

React can reuse the function while the dependencies do not change. If a dependency changes, React returns a new function.

const showStudent = useCallback(() => {
  console.log(`Student name: ${name}`);
}, [name]);

If the dependency array changes, React returns a new function that uses the updated name.

How does useCallback() help?

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

const Student = memo(function Student({ onShow }) {
  console.log("Student component rendered");

  return (
    <button onClick={onShow}>
      Show Student
    </button>
  );
});

function App() {
  const [count, setCount] = useState(0);

  const showStudent = useCallback(() => {
    console.log("Student details displayed");
  }, []);

  return (
    <div>
      <h2>Student Dashboard</h2>

      <h3>Counter: {count}</h3>

      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>

      <Student onShow={showStudent} />
    </div>
  );
}

export default App;

First, the counter starts at zero. When we click Increment, the counter increases and the parent component re-renders.

The student component is wrapped with memo(). It avoids re-rendering because its props remain unchanged.

Normally, a function declared inside the component would receive a new reference during that render. But it uses useCallback(), which allows React to reuse the showStudent function because its dependencies haven't changed.

Understading useMemo() vs useCallback()

Thank you for reading!

I hope this blog helped you understand useMemo() and useCallback(), how they work, and the key differences between them through simple explanations and real-time examples.