[useScrollTrigger] Make it scroll event handler passive

[djfarly]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Google Page Speed Insights warns about scroll event listeners not being passive.
So maybe the scroll event listener in useScrollTrigger should be passive? As long as there is no reason for it not to be?

I can make a PR but I do not want to do it if there is actually a reason for the event listener not to be passive. :)

Examples 🌈

https://github.com/mui/material-ui/blob/master/packages/mui-material/src/useScrollTrigger/useScrollTrigger.js#L34-L37

    target.addEventListener('scroll', handleScroll, { passive: true });
    return () => {
      target.removeEventListener('scroll', handleScroll, { passive: true });
    };

Motivation 🔦

Just want to have one less thing to worry about in page speed insights 😁

[djfarly]

Oh and by the way this is the article about passive event handlers.
https://web.dev/uses-passive-event-listeners/

[michaldudak]

I don't see any reason for not having the event marked as passive. This issue is good to take.

[Dsalazar1685]

I'd be happy to take this one.

[oliviertassinari]

any reason for not having the event marked as passive.

Could this create layout issues? It makes it possible for the scroll and the displayed elements to be out of sync. If React setstate triggers the paint in an asynchronous fashion, then we don't have this timing guaranteed anyway.

Why not move forward, the UX aspect is likely marginal and the DX win with less noise sound good.