Как избежать лишних ре-рендеров в React?

Чтобы избежать лишних ре-рендеров в React, можно использовать несколько подходов:

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

Пример с React.memo и useCallback:

import React, { useState, useCallback } from 'react';

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

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

  const handleClick = useCallback(() => {
    setCount(c => c + 1);
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <Child onClick={handleClick} />
    </div>
  );
}

Здесь Child не будет ре-рендериться без необходимости, так как onClick мемоизирован.