🛠️
LNUI-726Memoize Table row renderer to cut re-renders by 60%
266 / 291

Memoize Table row renderer to cut re-renders by 60%

Every keystroke in the table filter re-rendered all visible rows. Wrapping the row renderer in memo with a custom comparator cut re-renders by ~60%.

const TableRow = memo(TableRowImpl, (prev, next) =>
   prev.row.id === next.row.id &&
   prev.row.version === next.row.version &&
   prev.isSelected === next.isSelected
);

Measured on the 1k-row demo: keystroke latency went from 96ms to 34ms (p95).

Activity

alex.zhang created the issue· 11d ago
alex.zhang linked pull request #196· 10d ago
alex.zhang moved from In Progress to Done· 9d ago
eethan.brown9d ago

Nice one — the filter feels instant now. 🎉

🎉 5