[имя] что такое мемоизация в React и как работают useMemo, useCallback и React.memo?

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

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

Пример:

const MyComponent = ({ items }) => {
  const filteredItems = React.useMemo(() => {
    return items.filter(item => item.active);
  }, [items]);

  const handleClick = React.useCallback(() => {
    console.log('Clicked');
  }, []);

  return (
    <ChildComponent items={filteredItems} onClick={handleClick} />
  );
};

Здесь filteredItems пересчитывается только при изменении items, а handleClick сохраняет свою ссылку между рендерами, что помогает оптимизировать работу дочерних компонентов.