useMemo Hook in React

What Is usememo In React

useMemo is a React Hook that memoizes a value, preventing unnecessary recalculations during re-renders. It ensures that the value returned from the function is cached and only recomputed if any dependency in the array changes.

It is particularly useful for optimizing performance when dealing with expensive computations or when a child component depends on derived values

const memoizedValue = useMemo(() => {
  // Compute and return a memoized value
  return someValue;
}, [dependencies]);

• Input Parameters

  • Callback function (() => {}): The function calculating the value that you want to cache. It should be pure, should take no arguments, and should return a value of any type.
  • dependencies: An array of values that, when changed, will cause the memoized value to be recomputed..

• Returns

  • On the initial render, useMemo returns the result of calling calculate value with no arguments.

  • During next renders, it will either return an already stored value from the last render (if the dependencies haven’t changed), or call calculate value again, and return the result that calculate value has returned.

---

Basic Usage

App.js

import React, { useState } from "react";

// Parent Component
export default function App() {
  const [count, setCount] = useState(0);
  const [num, setNum] = useState(1);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment Count ({count})</button>
      <button onClick={() => setNum(num + 1)}>Increment Num ({num})</button>
      <WithoutUseMemo num={num} />
      <WithUseMemo num={num} />
    </div>
  );
}

WithUseMemo.js

import React, { useMemo } from "react";

// Component WITH useMemo
function WithUseMemo({ num }) {
  const calculate = (n) => {
    console.log("[WithUseMemo] Expensive calculation...");
    return n * 2;
  };

  const result = useMemo(() => calculate(num), [num]); // Memoized

  return <div>With useMemo: Result = {result}</div>;
}

WithoutUseMemo.js

import React from "react";

// Component WITHOUT useMemo
function WithoutUseMemo({ num }) {
  const calculate = (n) => {
    console.log("[WithoutUseMemo] Expensive calculation...");
    return n * 2;
  };

  const result = calculate(num); // No memoization

  return <div>Without useMemo: Result = {result}</div>;
}

In the above example,

Action	Without useMemo	With useMemo
When you click "Increment Count"	- calculate is called every time the parent (App) re-renders, even if num hasn’t changed. - Logs [WithoutUseMemo] Expensive calculation... each time.	- calculate is memoized and only runs if num changes. - Component still re-renders because the parent re-renders, but no log appears unless num changes.
When you click "Increment Num"	- calculate is called because the component re-renders, as there is no memoization. - Logs [WithoutUseMemo] Expensive calculation....	- The dependency num changes, so the memoized calculate function is re-run. - Logs [WithUseMemo] Expensive calculation... for this case.

---

Usecases

1. Memoizing Derived Data In Lists

useMemo is great for memoizing derived data in lists, like sorting or filtering.

import { useMemo, useState } from "react";

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 3, name: "Charlie" },
];

function App() {
  const [theme, setTheme] = useState("light");

  const themeHandler = () => {
    setTheme((currentTheme) => {
      return currentTheme === "light" ? "dark" : "light";
    });
  };

  return (
    <>
      <div>Current Theme: {theme}</div>
      <button onClick={themeHandler}>Toggle Theme</button>
      <ListItem users={users} />
    </>
  );
}

function ListItem({ users = [], theme = "light" }) {
  const [query, setQuery] = useState("");

  const filterUser = () => {
    console.log("Funtion filtering users:");
    return users.filter((user) => user.name.toLowerCase().includes(query.toLowerCase()));
  };

  /** Without useMemo, the filtering logic (filterUser function) would execute on every render,
   ** even when unrelated props like theme change.
   **/
  // const filteredUsers = filterUser();

  // In this case, useMemo ensures that filterUser runs only when query or users changes.
  const filteredUsers = useMemo(filterUser, [query, users]);

  return (
    <div className={theme}>
      <input type="text" placeholder="Search" value={query} onChange={(e) => setQuery(e.target.value)} />
      <ul>
        {filteredUsers.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

2. Memoizing Objects (Dependency Of Another Hook)

When working with React hooks like useEffect, useCallback, or others that depend on objects, it’s important to ensure that the dependency values don’t cause unnecessary re-renders or re-executions.

By default, JavaScript treats new object instances as different even if their content is identical. To avoid this, you can use useMemo to memoize objects so they only change when necessary.

In the below example, useEffect runs on every render because obj is a new instance each time, even if its contents (key: count) haven't changed.

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

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

  const obj = { key: count }; // New object created on every render

  useEffect(() => {
    console.log("Effect runs because object changes");
  }, [obj]);

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

To fix this use useMemo memoizes the object obj ensuring the same reference is retained unless its dependencies change.

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

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

  // Memoizing the object
  const obj = useMemo(() => ({ key: count }), [count]);

  useEffect(() => {
    console.log("Effect runs only when count changes");
  }, [obj]);

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

---

When To Use useMemo

Use useMemo only when:

• The computation is expensive.
• Rendering large lists or tables.

For simple computations, avoid useMemo to keep the code clean. Overuse can introduce complexity without performance gains.

---

What Happens If I Omit The Dependency Array In useMemo?

When the dependency array is omitted:

• The memoized computation executes on every render.
• The computation behaves as if you were calling the function directly in the render method, negating the performance optimization benefits of useMemo.
• The component could become less efficient if the computation is expensive, as it will run repeatedly.

---

Using an Async Function in useMemo

You can technically call an async function inside useMemo, but it is not recommended because useMemo is designed to memoize synchronous computations, and async functions inherently return a Promise.

const MyComponent = () => {
  const memoizedValue = useMemo(async () => {
    const result = await fetchData(); // Async operation
    return result;
  }, []);

  console.log(memoizedValue); // This will log a Promise, not the resolved data.

  return <div>Check the console</div>;
};

In this case:

• memoizedValue will hold the Promise returned by fetchData(), not the actual resolved value.
• You cannot directly use the resolved value in your component, as React won't wait for the Promise to resolve.