Autodesk / Autodesk/react-base-table

Heavy Recalculate style stack in performance on scroll

Open
#415 0 comments 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
1.5k
Forks
170
PR merge metrics
No merged PRs in 30d

Description

We are using react-base-table in our tables, the scroll virtualised performance seems laggy.
The "Recalculate Style" stack in Chrome performance tab reaches 50ms+, for unknown reason.
Chrome also shows "Forced reflow" warning in console and in the Performance tab.
Using react/react-dom v18.
Any way to overcome/debug the issue?
Screenshot 2023-05-17 at 5 28 22 PM

Contributor guide

Open the contributing guide

Research direction

No source files or tests are named. Start by reproducing a large-table scroll with React 18 and recording Chrome's Performance panel, then trace the Recalculate Style and forced-reflow entries into react-base-table. Done requires identifying the cause and demonstrating that scrolling no longer incurs the reported 50ms+ style work.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, performance
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.