Когда использовать useMemo и useCallback в React?

Когда вы изучаете хуки React, довольно непросто понять useMemo и useCallback хук.

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

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

Но в чем проблема не использовать useCallback?

Предположим, что функция, не обернутая хуком useCallback, передается в качестве свойства дочернему компоненту. Всякий раз, когда родительский компонент повторно визуализируется, дочерний компонент также повторно визуализируется, даже если реквизиты, переданные дочернему компоненту, не изменяются. Это связано с тем, что функция (передаваемая как реквизит) воссоздается каждый раз при повторном рендеринге родительского компонента. Да! вы поняли суть? Функция, переданная в качестве реквизита, отличается от повторного рендеринга родительского компонента.

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

Вот пример того, как вы можете использовать useMemo и useCallback:

import { useMemo, useCallback } from 'react';

function MyComponent(props) {
  // This expensive function will only be recomputed if one of the
  // dependencies has changed.
  const expensiveValue = useMemo(() => {
    return expensiveCalculation(props.a, props.b);
  }, [props.a, props.b]);

  // This function will only be recreated if one of the dependencies has changed.
  const memoizedCallback = useCallback(() => {
    console.log(expensiveValue);
  }, [expensiveValue]);

  return (
    <MyChildComponent onClick={memoizedCallback} />
  );
}

В этом примере функция expensiveCalculation будет вызываться только при изменении props.a или props.b. Функция memoizedCallback будет воссоздана только в случае изменения expensiveValue. Это может помочь избежать ненужного повторного рендеринга MyChildComponent и повысить производительность всего приложения.

Если вы заметили, useMemo принимает функцию в качестве параметра и возвращает возвращаемое значение функции. Точно так же theuseCallbackhook принимает функцию в качестве параметра и возвращает ту же функцию.

Вы можете следить за мной на моем сайте.