Когда текст хранится внутри Child, ввод обновляет Child, но сам по себе не требует рендера App. Кнопка, меняющая state App, по-прежнему может вызвать рендер его дочернего дерева.
Как локализация state меняет рендеры App и Child?
Когда текст хранится внутри Child, ввод обновляет Child, но сам по себе не требует рендера App. Кнопка, меняющая state App, по-прежнему может вызвать рендер его дочернего дерева.
Короткий ответ
Что ответить на собеседовании
Подробный разбор
Ответ с пояснениями
Условие
В первом варианте App хранит текст input и счётчик кнопки, Child получает text. Во втором варианте текст и input перенесены внутрь Child, а App хранит только счётчик. Memo и компиляторная мемоизация отключены. Какие компоненты затрагивает ввод во втором варианте?
Ответ
Когда текст хранится внутри Child, ввод обновляет Child, но сам по себе не требует рендера App. Кнопка, меняющая state App, по-прежнему может вызвать рендер его дочернего дерева.
Направление обновления по родительскому дереву нельзя путать с владением DOM: изменение state ребёнка не поднимается автоматически к родителю. Если родителю нужен только итог формы, его можно передавать событием сохранения. Если App действительно должен читать каждое изменение текста, состояние придётся согласованно поднять или использовать другой контракт, а не скрывать его ради формального уменьшения рендеров.
Источник: react.dev.