How is useMemo used in React?

“useMemo is a Hook in React used for optimizing performance. It takes a function and a dependency array as parameters and returns the result of the function’s computation.”

The purpose of useMemo is to prevent the re-calculation of a function’s result every time it is rendered, thus improving performance. When the values in the dependency array change, useMemo will recalculate the function’s result. If the values in the dependency array remain the same, it will reuse the previous calculation result.

The typical scenario for using useMemo is when complex calculations need to be performed during component rendering or when optimizing expensive operations, such as filtering, sorting, or formatting large amounts of data.

Here is the basic usage of useMemo:

import React, { useMemo } from 'react';

const MyComponent = ({ data }) => {
  const expensiveCalculation = useMemo(() => {
    // 进行一些复杂的计算
    return data.filter(item => item > 5);
  }, [data]);

  return (
    <div>
      {expensiveCalculation.map(item => (
        <span key={item}>{item}</span>
      ))}
    </div>
  );
};

In the example mentioned above, expensiveCalculation is a calculation result that depends on data. When data changes, useMemo will recalculate the value of expensiveCalculation; if data does not change, it will reuse the result of the previous calculation. This helps avoid expensive calculations being made during every render, thus improving performance.