material-ui icon indicating copy to clipboard operation
material-ui copied to clipboard

[useScrollTrigger] refactor: improve scroll event handling with requestAnimationFrame throttling

Open wo-o29 opened this issue 3 months ago • 2 comments

This PR enhances the useScrollTrigger hook by introducing requestAnimationFrame throttling to the scroll event listener.

Improvements and Benefits:

  • Introduces a ticking flag combined with requestAnimationFrame to 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.

wo-o29 avatar Sep 21 '25 12:09 wo-o29

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%)

Details of bundle changes

Generated by :no_entry_sign: dangerJS against 7714b9cf8c2d0acd5bfcbeadf58be2d75b1cd84c

mui-bot avatar Sep 21 '25 12:09 mui-bot

I also fixed that part because pnpm-lock.yaml was out of date and the ci test was failing.

wo-o29 avatar Sep 28 '25 04:09 wo-o29