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

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

почему вам следует использовать useMemo или useCallback

Обычно в React большинство вычислений выполняются быстро, но иногда приходится вычислять очень большой массив или выполнять какие-то дорогостоящие вычисления, которые не нужно выполнять при каждом повторном рендеринге.

Хуки useMemo и useCallback могут помочь решить эту проблему, кэшируя эти дорогостоящие вычисления между повторными рендерингами.

что такое useMemo и как его использовать.

useMemo — это перехватчик React, который кэширует результат вычислений между повторными рендерингами и принимает два аргумента:

• CalculatedValue: функция, вычисляющая значение, которое вы хотите кэшировать. Функция не должна принимать никаких параметров, она должна быть чистой и возвращать значения любого типа. React вернет тот же вычисленный результат, если зависимости не изменились. В противном случае он вычислит новый результат и закеширует его.
• зависимости: список всех ссылок на реактивные значения, которые находятся внутри вашего CalculatedValue, из констант переменных состояний и вызовов функций. React попытается сравнить каждое реактивное значение с его предыдущим значением, используя сравнение Object.it.

useMemo использование

Чтобы кэшировать вычисления между повторными рендерингами, поместите их в хук useMemo на верхнем уровне компонента.

useMemo(fn, зависимости)

const App = () => {
  const useMemo(() => {
    filterTodo(todos, tab)
  }, [todos, tab])
  return(...)
}

export default App

Обратите внимание, что первый параметр useMemo — это функция без параметров.

В первый раз React вычислит результирующее значение первого параметра useMemo, затем запомнит второй параметр, который представляет собой список зависимостей. React будет кэшировать вычисленный результат между повторными рендерингами и пересчитывать результат только при изменении одного из значений зависимостей.

что такое useCallback и как его использовать.

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

Чтобы использовать useCallback, вам необходимо передать параметры:

• Определение функции, которое необходимо кэшировать.
• Список зависимостей

const кэшированныйFn = useCallback(fn, зависимости)

import { useCallback } from 'react';

export default function ProductPage({ productId }) {
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/'   productId   '/buy', {
      referrer,
      orderDetails,
    });
  }, [productId, referrer]);

Когда использовать useMemo вместо useCallback

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

Пропуск повторного рендеринга компонента

Иногда у вас есть родительский компонент, который необходимо повторно отрисовать, что также приведет к повторному отрисовке дочернего компонента. Компонент можно кэшировать с помощью memo.

Предположим, у нас есть компонент Todolist с состоянием темы и дочерний компонент List. Всякий раз, когда состояние темы изменяется, компонент списка перерисовывается, в чем нет необходимости. чтобы решить эту проблему, используйте памятку.

мы оборачиваем функциональный компонент списка memo.

export default function TodoList({ todos, tab, theme }) {
  // ...
  return (
    

      
  );
}

import { memo } from 'react';

const List = memo(function List({ items }) {
  // ...
});

Заключение

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