Как избежать лишних вызовов console.log в дочернем компоненте?

Почему возникают лишние вызовы console.log?

В React компонент перерисовывается при изменении состояния или пропсов. Если дочерний компонент не оптимизирован, он будет рендериться каждый раз, когда родитель обновляется, даже если его собственные пропсы не изменились. Это приводит к лишним вызовам console.log, которые находятся в теле компонента.

Как это исправить?

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

import React, { memo } from 'react';

const Child = memo(({ value }) => {
  console.log('Child rendered');
  return <div>{value}</div>;
});

function Parent() {
  const [count, setCount] = React.useState(0);
  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
      <Child value="static" />
    </>
  );
}

В этом примере Child не будет перерисовываться при нажатии кнопки, так как пропс value не меняется. Если же передаётся функция или объект, их нужно стабилизировать с помощью useCallback и useMemo.

Дополнительные советы

• Используйте React.StrictMode для выявления проблем, но помните, что он вызывает двойной рендер в dev-режиме.
• Не злоупотребляйте мемоизацией — применяйте её только для компонентов, которые действительно часто перерисовываются.
• Проверяйте с помощью React DevTools, какие компоненты перерисовываются.

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