DOM и React Middle memo, useMemo, useCallback обновлено
memo и стабильный обработчик
Условие
Child обёрнут в memo и считает свои рендеры через onRender(). Родитель должен перерисовываться по клику, а Child - нет. Пропс onAction обязателен и должен быть стабильным.
Что проверяют тесты
родитель перерисовывается
дитя не перерисовывается
Как подойти
memo бесполезен, если в него передают новую ссылку каждый рендер. Функции стабилизируют useCallback, объекты и массивы - useMemo. Обратная сторона: мемоизация ради мемоизации тоже стоит памяти и сравнений, поэтому её ставят там, где измеримо больно.
Подсказки: 2
- memo сравнивает пропсы поверхностно.
- Инлайновая стрелка - новый объект на каждом рендере, и memo всегда промахивается.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.
Термины по теме
Ещё по теме «memo, useMemo, useCallback»
- Перерендерится ли children
- React Compiler
- React.memo
- useCallback
- useMemo
- Таблица на 10 000 строк
- memo и children
- memo и стрелочная функция в props