React useMemo: STEP by STEP guide with Component Code

Updated Apr 23, 2024

Why was the React component sad? It realized it forgot to memoize its props!😜

👋 Hello there! Welcome to the world of ReactJS, where creating efficient and optimized applications is a top priority.

In this article, we will introduce you to React's useMemo hook and explain how you can use it with parameters to improve the performance of your application while reducing redundancy.

So, let's get started!

Table of Contents

• Introduction to useMemo
• Understanding React useMemo with parameters
• When to use useMemo with parameters
• How to use useMemo with parameters
• Examples of useMemo with parameters
• Pros and cons of using useMemo with parameters
• Conclusion
• FAQs

Introduction to useMemo

React is a JavaScript library for building user interfaces, and it emphasizes the creation of reusable and efficient components.

However, when dealing with complex components or large data sets, performance issues can arise.

To address this problem, React provides a hook called useMemo, which allows you to memoize the results of a function call, preventing the recalculation of the same value every time the component re-renders.

Understanding React useMemo with parameters

useMemo accepts two arguments: a function that returns a value, and an array of dependencies.

The function is called only when any of the dependencies change, otherwise, it returns the cached result.

The second argument is an optional array of dependencies that useMemo will use to determine whether to recalculate the result or not. If the dependencies do not change, useMemo will return the cached result.

When to use useMemo with parameters

• useMemo is useful when you need to perform a time-consuming calculation or an expensive operation that produces the same result for the same inputs.

• By caching the result of the function, you can avoid unnecessary calculations and improve performance.

How to use useMemo with parameters

Let's take a practical example to understand how to use useMemo with parameters.

Consider a component that displays a list of items fetched from an API.

In this scenario, we can use useMemo to cache the list of items and avoid re-fetching it every time the component re-renders.

import { useMemo, useState } from "react";

function ItemList() {
  const [searchTerm, setSearchTerm] = useState("");
  const [items, setItems] = useState([]);

  const filteredItems = useMemo(() => {
    return items.filter((item) =>
      item.name.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }, [items, searchTerm]);

  return (
    <>
      <input
        type="text"
        placeholder="Search"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />

      <ul>
        {filteredItems.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </>
  );
}

In this example, we are using useMemo to memoize the filtered list of items based on the items and searchTerm dependencies. The filtered items are only recalculated when either of the dependencies changes.

This way, we can avoid recalculating the filtered items on every re-render and improve the performance of our component.

Examples of useMemo with parameters

Here are some more examples of using useMemo with parameters:

1. Memoizing a complex calculation

const result = useMemo(() => {
  // perform a complex calculation here
  return someValue;
}, [dependency]);

2. Memoizing an API response

const data = useMemo(() => {
  return fetch("https://example.com/api/data").then((res) => res.json());
}, []);

3. Memoizing a sorted list

const sortedList = useMemo(() => {
  return items.sort((a, b) => a.value - b.value);
}, [items]);

Pros and cons of using useMemo with parameters

Pros:

• Improves performance by avoiding unnecessary calculations.
• Reduces redundancy by memoizing the results of function calls.

Cons:

• Can add complexity to the code if used improperly.
• Overusing useMemo can lead to unnecessary memory usage.

Conclusion

In conclusion, useMemo is a useful hook for improving the performance of your React components. By memoizing the results of function calls, you can avoid unnecessary calculations and reduce redundancy. However, it's important to use useMemo properly and avoid overusing it, as it can add complexity to your code and lead to unnecessary memory usage.

We hope this article has helped you understand how to use useMemo with parameters in React. Happy coding!

FAQs

Q: What does useMemo() actually do?

A: useMemo() is a hook in React that memoizes the result of a function call. It takes a function and an array of dependencies as inputs, and returns the memoized result of the function.

Q: Why is useMemo used in React?

A: useMemo is used in React to improve the performance of components by memoizing the result of expensive function calls. This can avoid unnecessary calculations and reduce redundancy.

Q: What is the difference between useEffect and useMemo?

A: useEffect is used to perform side effects in a React component, while useMemo is used to memoize the result of a function call. useEffect runs after every render, while useMemo only runs when its dependencies change.

Q: What is the difference between useMemo and useCallback?

A: useMemo memoizes the result of a function call, while useCallback memoizes the function itself. Use useMemo when you need to memoize the result of a function call, and use useCallback when you need to memoize the function itself.

Q: What is the difference between useMemo and React?

A: useMemo is a hook in React that memoizes the result of a function call, while React is a JavaScript library for building user interfaces.

Q: What is memoization in React?

A: Memoization is the process of caching the result of a function call and returning the cached result when the function is called again with the same inputs. In React, memoization can be achieved using hooks such as useMemo and useCallback.

Q: What is lazy loading in React?

A: Lazy loading is a technique in React for loading components or assets only when they are needed, rather than loading everything upfront. This can improve the performance of the application by reducing the initial load time.

Q: Why use callback in React?

A: useCallback is used in React to memoize functions and avoid unnecessary re-renders. This can improve the performance of the application by reducing the amount of work that needs to be done on each render.