Прямая передача сохраняет ту же ссылку на handleSelect. Новая стрелочная обёртка создаётся при каждом рендере и меняет prop, что может мешать мемоизации ребёнка.
Как передавать обработчик мемоизированному компоненту?
Прямая передача сохраняет ту же ссылку на handleSelect. Новая стрелочная обёртка создаётся при каждом рендере и меняет prop, что может мешать мемоизации ребёнка.
Короткий ответ
Что ответить на собеседовании
Подробный разбор
Ответ с пояснениями
Условие
Child мемоизирован и получает onSelect без аргументов. Родитель уже имеет стабильную функцию handleSelect. Сравните <Child onSelect={handleSelect}/> и <Child onSelect={() => handleSelect()}/> при неизменных остальных props, без React Compiler.
Ответ
Прямая передача сохраняет ту же ссылку на handleSelect. Новая стрелочная обёртка создаётся при каждом рендере и меняет prop, что может мешать мемоизации ребёнка.
Обёртка нужна, если меняется смысл вызова, например добавляется аргумент, а не просто ради привычного синтаксиса. Если handleSelect сама объявляется заново каждый рендер, прямая передача уже не гарантирует стабильности. Оптимизацию проверяют по измерениям и не заменяют ею корректную работу компонента; собственное state или context ребёнка всё равно может вызвать обновление.