Строку таблицы обернули в мемоизацию, но рендеров не стало меньше
Таблица на 800 строк подтормаживает при вводе в поиск. Строку обернули в мемоизацию:
const Row = React.memo(function Row({ item, onSelect }) {
// ...
});
function Table({ items, query }) {
const filtered = useMemo(() => filterItems(items, query), [items, query]);
return filtered.map((item) => (
<Row key={item.id} item={item} onSelect={() => select(item.id)} />
));
}
Профайлер показывает, что все строки перерисовываются как и раньше. Почему мемоизация не сработала?
- Обработчик выбора — новая функция при каждом рендере, а мемоизация сравнивает пропсы по ссылке и считает их изменившимися.
- Мемоизация вычисления списка отменяет мемоизацию дочерних компонентов: пересчитанный массив создаёт новые элементы в обход сравнения пропсов.
- Ключ по идентификатору заставляет React пересоздавать строки, обходя сравнение пропсов.
- Родительский компонент таблицы тоже должен быть обёрнут в мемоизацию, иначе сравнение у детей не выполняется.