Что такое React.memo и зачем он нужен

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

Как работает React.memo?

Когда вы оборачиваете компонент в React.memo, React сравнивает текущие и предыдущие props (по умолчанию — поверхностно) и пропускает ререндер, если они остались прежними.

Синтаксис

const MyComponent = React.memo((props) => {
  // компонент
});

Пример: без React.memo

const Button = ({ onClick }) => {
  console.log("🔁 Button rendered");
  return <button onClick={onClick}>Click me</button>;
};

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

  return (
    <>
      <Button onClick={() => console.log("clicked")} />
      <button onClick={() => setCount(count + 1)}>+1</button>
    </>
  );
}

Даже при нажатии на +1, Button перерендерится, потому что создаётся новая функция onClick на каждом рендере.

С React.memo + useCallback

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

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

  const handleClick = useCallback(() => {
    console.log("clicked");
  }, []);

  return (
    <>
      <Button onClick={handleClick} />
      <button onClick={() => setCount(count + 1)}>+1</button>
    </>
  );
}

Теперь Button не ререндерится, если handleClick не изменился.

Когда использовать React.memo?

Полезен, если:

• Компонент часто получает одни и те же props
• Он тяжёлый по вычислениям (например, содержит вложенные списки, графики)
• Вы хотите избежать лишних ререндеров

Не нужен, если:

• Компонент маленький и простой
• Props всегда разные (например, функция создаётся заново каждый раз без useCallback)
• Нет проблем с производительностью

Кастомное сравнение пропсов

Если нужно контролировать сравнение вручную:

React.memo(Component, (prevProps, nextProps) => {
  return prevProps.value === nextProps.value;
});