useMemo, useCallback, memo

Question

Когда нужны useMemo, useCallback и React.memo, а когда они только мешают?

Техпрогон · Accepted Answer

React.memo пропускает рендер, если пропсы поверхностно равны предыдущим. useCallback и useMemo нужны прежде всего, чтобы эти пропсы действительно были равны - иначе новая стрелка на каждом рендере убивает весь смысл memo. memo сравнивает пропсы поверхностно и пропускает рендер. useCallback сохраняет ссылку на функцию между рендерами. useMemo сохраняет результат вычисления. memo бесполезен, если внутрь передают новый объект или стрелку. у мемоизации есть цена: память и сравнение. оправдано: дорогое вычисление, стабильная зависимость эффекта, большой список. React.memo пропускает рендер, если пропсы поверхностно равны предыдущим. useCallback и useMemo нужны прежде всего, чтобы эти пропсы действительно были равны - иначе новая стрелка на каждом рендере убивает весь смысл memo. Когда оправдано: вычисление реально дорогое (сортировка тысяч строк); значение попадает в зависимости эффекта, и без стабильности эффект бьётся каждый рендер; компонент рендерит большое дерево. Когда вредно: обёртки вокруг дешёвых операций. Сравнение зависимостей и удержание значения в памяти не бесплатны, а читаемость падает. Правило простое: сначала замер в профайлере, потом мемоизация.

useMemo, useCallback, memo

Вопрос

Попробуйте сами

Коротко

Что должно прозвучать в ответе

Что могут спросить следом

Разбор

Термины по теме

Ещё по теме «memo, useMemo, useCallback»