Понимание useMemo и useCallback в React: хуки оптимизации производительности

useMemo и useCallback — два важных хука в React, популярной библиотеке JavaScript для создания пользовательских интерфейсов. Вот объяснение того, что делают эти хуки, и несколько примеров их использования:

  1. useMemo:
    Хук «useMemo» используется для запоминания значений в React. Он позволяет оптимизировать производительность ваших компонентов, запоминая результат функции и пересчитывая его только при изменении ее зависимостей. Он принимает два аргумента: функцию, вычисляющую значение, и массив зависимостей. Вычисленное значение кэшируется до тех пор, пока не изменится одна из зависимостей.

Пример:

import React, { useMemo } from 'react';
const MyComponent = ({ a, b }) => {
  const result = useMemo(() => {
    // Expensive computation
    return a + b;
  }, [a, b]);
  return <div>{result}</div>;
};

В этом примере результат дорогостоящего вычисления (a + b) будет пересчитываться только при изменении «a» или «b».

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

Пример:

import React, { useCallback } from 'react';
const MyComponent = ({ onClick }) => {
  const handleClick = useCallback(() => {
    onClick('Button clicked!');
  }, [onClick]);
  return <button onClick={handleClick}>Click me</button>;
};

В этом примере функция handleClick будет воссоздана только в случае изменения зависимости onClick. Это предотвращает ненужную повторную визуализацию дочерних компонентов, использующих этот обратный вызов.