В чем разница между useMemo и react.memo и useCallback

1️⃣ Как кратко ответить

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

2️⃣ Подробное объяснение темы

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

useMemo

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

import React, { useMemo } from 'react';
​
function ExpensiveComponent({ a, b }) {
  // useMemo мемоизирует результат функции
  const computedValue = useMemo(() => {
    // Дорогостоящая операция
    return a + b;
  }, [a, b]); // Зависимости: вычисление произойдет только если a или b изменятся
​
  return <div>{computedValue}</div>;
}

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

react.memo

react.memo — это HOC (Higher-Order Component), который предотвращает повторный рендеринг компонента, если его пропсы не изменились. Это полезно для оптимизации функциональных компонентов.

import React from 'react';
​
// Компонент обернут в react.memo
const MyComponent = React.memo(function MyComponent({ name }) {
  console.log('Rendering MyComponent');
  return <div>Hello, {name}!</div>;
});
​
function ParentComponent() {
  return <MyComponent name="John" />;
}

• react.memo сравнивает текущие и предыдущие пропсы.
• Если пропсы не изменились, компонент не будет рендериться повторно.
• Это особенно полезно для компонентов, которые получают неизменные пропсы.

useCallback

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

import React, { useState, useCallback } from 'react';
​
function Button({ onClick }) {
  console.log('Rendering Button');
  return <button onClick={onClick}>Click me</button>;
}
​
function ParentComponent() {
  const [count, setCount] = useState(0);
​
  // useCallback мемоизирует функцию
  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]); // Зависимость: функция будет пересоздана только если count изменится
​
  return (
    <div>
      <p>Count: {count}</p>
      <Button onClick={handleClick} />
    </div>
  );
}

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

Заключение

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