Found 1 bookmarks
Custom sorting
The Uphill Battle of Memoization
The Uphill Battle of Memoization

Есть статьи Дэна Абрамова и Кент Си Доддса, объясняющие, как правильно композировать компоненты в React, чтобы не требовалось использование React.memo. Но в чем проблема React.memo?

Статья разбирает, почему использование React.memo приводит к усложнению кода. Если коротко, то React.memo использует для сравнения Object.is, что влечет за собой требование прокидывания стабильных ссылок на объекты и функции в пропсы. А это, в свою очередь, требует заворачивания в useMemo всех объектов, вместо простого их прокидывания, даже если они не изменяются.

Например, в коде <ExpensiveTree style={{ backgroundColor: 'blue' }} /> при каждом рендере style будет новый, поэтому, чтобы не вызывать ререндер, нужно либо вынести style в константы за компонент (что не всегда возможно), либо завернуть объект в useMemo

Также, если компонент принимает children, то JSX разметка тоже не является стабильной ссылкой, из-за чего при каждом рендере children будет отличаться

Поэтому, вместо использования мемоизации следует рассматривать другие альтернативы: правильная композиция компонентов или стейт-менеджеры

·tkdodo.eu·
The Uphill Battle of Memoization