Какие есть хуки для оптимизации?

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

useMemo

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

import { useMemo } from 'react';

function ExpensiveComponent({ list, filter }) {
  const filteredList = useMemo(() => {
    console.log('Recalculating filtered list...');
    return list.filter(item => item.includes(filter));
  }, [list, filter]); // Пересчитается только если изменится list или filter

  return {filteredList.join(', ')};
}

useCallback

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

import { useCallback } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log('Button clicked, count:', count);
    // Какая-то логика
  }, [count]); // Функция обновится только при изменении count

  return (
    
       setCount(c => c + 1)}>Increment
      
    
  );
}

const ChildComponent = React.memo(({ onClick }) => {
  console.log('Child rendered');
  return Click me;
});

React.memo

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

import React from 'react';

const MyComponent = React.memo(function MyComponent({ text }) {
  console.log('MyComponent rendered with text:', text);
  return {text};
});

// Компонент перерендерится только если проп `text` изменится

Эти инструменты следует применять осознанно. Преждевременная оптимизация может усложнить код. Начинайте оптимизировать только при появлении реальных проблем с производительностью, которые можно измерить с помощью React DevTools Profiler.

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