[Tabs] Avoid forced reflow
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
In Tabs.js,
https://github.com/mui-org/material-ui/blob/79ebf71d31cca2c73143891960ea54ec1132bdeb/packages/material-ui/src/Tabs/Tabs.js#L137
, getBoundingClientRect is called. In our application, in the developer tools, the performance profile of our application complains that "Warning Forced reflow is a likely performance bottleneck". According to this, it seems that calling getBoundingClientRect may cause performance problems in some scenarios. Is it possible that getBoundingClientRect is replaced by something else that doesn't cause a forced reflow?
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in packages/material-ui/src/Tabs/Tabs.js at the referenced getBoundingClientRect call and review how the measurement is used. Profile the Tabs behavior in a representative application, then determine whether the measurement can be avoided or scheduled differently without changing layout behavior; done means the forced-reflow warning is addressed while Tabs continues to work correctly.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100