React: Мемоизация и хук useMemo

Хук useMemo очень похож на useCallback и также используется для повышения производительности. Разница заключается в том, что вместо функций-коллбэков useMemo запоминает результаты дорогостоящих вычислений.

Если некоторая операция при одних и тех же входных данных всегда возвращает один и тот же результат, его можно поставить в соответствие этим данным и запомнить. Таким образом, в следующий раз не придется производить само вычисление. Достаточно будет взять сохраненный результат, соответствующий входным данным.

Хук useMemo возвращает результат вычисления.

function App() {
  // создаем состояние компонента
  const [wordIndex, setWordIndex] = useState(0);
  const [count, setCount] = useState(0);

  // будем рассчитывать длину слов в этом массиве
  const words = ["i", "am", "learning", "react"];
  const word = words[wordIndex];

  function getLetterCount(word) {
    // представим, что это невероятно тяжелая операция,
    // которая занимает уйму времени
    let i = 0;
    while (i < 1000000) i++;
    return word.length;
  }

  // Мемоизация сложных вычислений
  // позволяет значительно увеличить их производительность
  const letterCount = React.useMemo(() => getLetterCount(word), [word]);

  // если бы мы не использовали хук, вот так
  // const letterCount = getLetterCount(word);
  // то счетчик обновлялся бы с большой задержкой

  function handleChangeIndex() {
    // переходим к следующему слову
    const next = wordIndex + 1 === words.length ? 0 : wordIndex + 1;
    setWordIndex(next);
  }

  return (
    <div>
      <p>
        {word} has {letterCount} letters
      </p>
      <button onClick={handleChangeIndex}>Next word</button>
      <p>Counter: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}