How to use useMemo hook in ReactJS

In React, useMemo is a hook that allows you to optimize the performance of your component by memoizing (saving) the results of a expensive function. This means that if the inputs to the function remain the same, the memoized result will be returned instead of re-computing the result. This can be especially useful when dealing with expensive operations that do not need to be executed on every render, such as complex calculations or expensive DOM manipulations.

To use useMemo, you first need to import it from the react library at the top of your component file:

import { useMemo } from 'react';

Next, you can call useMemo in your component and pass it two arguments: the function whose result you want to memoize, and an array of dependencies. The hook will then return the result of calling the function with the current dependencies. Here is an example of how you might use useMemo to memoize the result of a calculation:

const MyComponent = (props) => {
  // Define the calculation we want to memoize
  const calculateResult = (num1, num2) => {
    // Do some expensive calculation here
    return num1 + num2;
  }

  // Call useMemo and pass it the calculation function and an array of dependencies
  const memoizedResult = useMemo(() => calculateResult(props.num1, props.num2), [props.num1, props.num2]);

  // Use the memoized result in the component
  return <div>{memoizedResult}</div>;
}

In this example, useMemo will call the calculateResult function and save its result when the component is first rendered. On subsequent renders, if the values of props.num1 and props.num2 have not changed, useMemo will return the saved result instead of calling the function again. This can improve the performance of the component by avoiding unnecessary calculations.