Рефакторинг лишних рендеров
Условие
Дочерний компонент перерисовывается при каждом клике по счётчику, хотя его пропсы логически не меняются. Число рендеров дочернего считается через onChildRender. Почини так, чтобы клик по счётчику не вызывал рендер дочернего.
Что проверяют тесты
счётчик работает
дитя не перерисовывается
обработчик дочернего работает
Как подойти
Задачу дают как рефакторинг: код работает, но работает лишнее. Диагноз произносится вслух до правки - memo бесполезен, пока в компонент передают новую ссылку на каждом рендере. Лечение: useCallback с пустыми зависимостями. Функциональная форма setCount не относится к рендерам, но убирает зависимость от значения текущего рендера и потому пишется сразу. Что добавить вслух: мемоизация оправдана там, где измерили, а не везде; React Compiler в будущем снимет эту рутину.
Подсказки: 3
- memo сравнивает пропсы поверхностно - инлайновая стрелка каждый раз новая.
- onChildRender приходит пропсом сверху и стабилен - его трогать не надо.
- Заодно стоит перевести setCount на функциональную форму.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.
Термины по теме
Ещё по теме «memo, useMemo, useCallback»
- Перерендерится ли children
- React Compiler
- React.memo
- useCallback
- useMemo
- Таблица на 10 000 строк
- memo и children
- memo и стрелочная функция в props