Перерендерится ли дочерний компонент, если ему не передаются пропсы?

В React ререндеринг родительского компонента по умолчанию запускает ререндеринг всех его дочерних компонентов, независимо от того, передаются ли им пропсы. Это связано с тем, что React не сравнивает пропсы автоматически — он просто вызывает функцию компонента заново, чтобы получить новое дерево элементов.

Почему так происходит

Когда состояние или пропсы родителя меняются, React помечает компонент как «грязный» и запускает его рендер. После этого он рекурсивно рендерит всех детей, даже если их входные данные не изменились. Отсутствие пропсов не является исключением — компонент всё равно вызывается.

Пример

function Child() {
  console.log('Child render');
  return <div>Child</div>;
}

function Parent() {
  const [count, setCount] = useState(0);
  return (
    <>
      <button onClick={() => setCount(count + 1)}>{count}</button>
      <Child />
    </>
  );
}

При каждом клике на кнопку в консоли будет появляться «Child render», хотя Child не получает никаких пропсов.

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

• React.memo — оборачивает компонент и сравнивает пропсы поверхностно. Если пропсов нет, компонент не будет ререндериться при изменении родителя.
• useMemo / useCallback — помогают стабилизировать ссылки на пропсы и функции.
• Вынос состояния вниз — если состояние нужно только части дерева, держите его в этом поддереве.
• children как проп — передача уже созданных элементов через children позволяет React переиспользовать их.

Пример с React.memo

const Child = React.memo(function Child() {
  console.log('Child render');
  return <div>Child</div>;
});

Теперь при изменении состояния родителя Child не будет ререндериться, так как его пропсы (пустой набор) не изменились.

Итог: по умолчанию дочерний компонент без пропсов всё равно перерендерится вместе с родителем. Если это узкое место по производительности, применяйте React.memo или архитектурные приёмы для изоляции обновлений.