Изменение состояния перерендеривает App, а обычный дочерний компонент выполняется при обработке нового дерева родителя. Неизменный label сам по себе не включает пропуск рендера.
Почему Child рендерится при кнопке и вводе у родителя?
Изменение состояния перерендеривает App, а обычный дочерний компонент выполняется при обработке нового дерева родителя. Неизменный label сам по себе не включает пропуск рендера.
Короткий ответ
Что ответить на собеседовании
Подробный разбор
Ответ с пояснениями
Условие
App хранит counter и text в useState. Кнопка увеличивает counter, input меняет text. App каждый раз возвращает <Child label="Профиль" />; Child объявлен вне App, memo и React Compiler не используются. Почему изменение обоих состояний вызывает выполнение Child?
Ответ
Изменение состояния перерендеривает App, а обычный дочерний компонент выполняется при обработке нового дерева родителя. Неизменный label сам по себе не включает пропуск рендера.
Если Child действительно дорогой и его входы стабильны, можно рассмотреть memo после измерения. Но повторный рендер не означает пересоздание DOM или remount: React сопоставляет дерево и применяет необходимые изменения. Состояние ввода лучше держать достаточно близко к форме, чтобы не заставлять большой родительский экран выполнять лишнюю работу.
Источник: react.dev.