Мемоизируйте Parent и Child и не передавайте им заново создаваемые объекты или функции без необходимости. Текст остаётся в Parent, счётчик — в App; это разделяет источники обновлений.
Как изолировать рендеры App, Parent и Child?
Мемоизируйте Parent и Child и не передавайте им заново создаваемые объекты или функции без необходимости. Текст остаётся в Parent, счётчик — в App; это разделяет источники обновлений.
Короткий ответ
Что ответить на собеседовании
Подробный разбор
Ответ с пояснениями
Условие
Без React Compiler App хранит счётчик кнопки, Parent — текст input, Child показывает неизменный статический блок. Нужен пропуск Parent при изменении счётчика App и пропуск Child при вводе в Parent. Props и context не меняются; компоненты объявлены на уровне модуля.
Ответ
Мемоизируйте Parent и Child и не передавайте им заново создаваемые объекты или функции без необходимости. Текст остаётся в Parent, счётчик — в App; это разделяет источники обновлений.
Memo не блокирует собственный state компонента: ввод по-прежнему обновляет Parent. Child может пропустить это обновление при равных props. При изменении счётчика App Parent получает прежние props и также может быть пропущен. Такая схема — оптимизация, а не гарантия точного числа вызовов во всех режимах; correctness и побочные эффекты не должны зависеть от мемоизации.