Middle

Какие методы оптимизации ре-рендеров существуют в React (React.memo, useCallback, useMemo)?

Companies where asked

ОТП Банк

Answer from AI

sobes.tech AI

В React для оптимизации повторных рендеров компонентов используются следующие методы:

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

Пример:

const MyComponent = React.memo(({ onClick, data }) => {
  const computedValue = useMemo(() => expensiveCalculation(data), [data]);

  const handleClick = useCallback(() => {
    onClick(computedValue);
  }, [onClick, computedValue]);

  return <button onClick={handleClick}>Click me</button>;
});

Такой подход снижает количество ненужных рендеров и повышает производительность приложения.

Previous Next