Выбор ответа Middle memo, useMemo, useCallback спрашивают часто обновлено
memo и стрелочная функция в props
Вопрос
Row обёрнут в memo. При вводе в поиск в родителе все строки всё равно перерендериваются. Почему?
{items.map(item => (
<Row key={item.id} item={item} onSelect={() => select(item.id)} />
))}
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: onSelect новая функция на каждом рендере, props изменились. memo сравнивает каждый проп через Object.is.
Варианты ответа
onSelectновая функция на каждом рендере, props изменилисьправильный ответmemoне работает с элементами, которые рендерятся черезmapkeyдолжен быть индексом, иначеmemoне узнаёт строкуmemoсравнивает props в продакшене, а в dev всегда рендерит
Разбор
memo сравнивает каждый проп через Object.is. Стрелочная функция создаётся заново при каждом рендере, поэтому проп «изменился». Решение: useCallback для onSelect (и стабильный item) или React Compiler. Со списками memo работает. Ключ-индекс только навредит. Сравнение props работает и в dev, и в продакшене.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.