material-ui
material-ui copied to clipboard
[useScrollTrigger] refactor: improve scroll event handling with requestAnimationFrame throttling
This PR enhances the useScrollTrigger hook by introducing requestAnimationFrame throttling to the scroll event listener.
Improvements and Benefits:
- Introduces a
tickingflag combined withrequestAnimationFrameto throttle scroll event handling, reducing the number of state updates and re-renders on rapid scroll events. - Prevents potential performance bottlenecks caused by frequent and expensive update calls during fast scrolling.
- Cleans up any scheduled animation frame callbacks on unmount to avoid memory leaks.
- The initial trigger evaluation remains immediate on mount and dependency changes, maintaining correct state without unnecessary delay.
- Improves smoothness and responsiveness especially on devices or browsers where scroll events fire frequently.
These changes help optimize performance without changing the hook’s external behavior or API.
- [X] I have followed (at least) the PR section of the contributing guide.
Netlify deploy preview
https://deploy-preview-46968--material-ui.netlify.app/
Bundle size report
| Bundle | Parsed size | Gzip size |
|---|---|---|
| @mui/material | 🔺+157B(+0.03%) | 🔺+41B(+0.03%) |
| @mui/lab | 0B(0.00%) | 0B(0.00%) |
| @mui/system | 0B(0.00%) | 0B(0.00%) |
| @mui/utils | 0B(0.00%) | 0B(0.00%) |
Generated by :no_entry_sign: dangerJS against 7714b9cf8c2d0acd5bfcbeadf58be2d75b1cd84c
I also fixed that part because pnpm-lock.yaml was out of date and the ci test was failing.