Handling of 'wheel' input event was delayed for xxx ms due to main thread being busy

Question

I was using Chrome version: Version 55.0.2883.75 beta (64-bit) with material-ui (https://github.com/callemall/material-ui) version 0.16.5 with react+react-dom version 15.4.1 and noticed the following warning message when I scroll down the page with the mouse wheel:

Handling of 'wheel' input event was delayed for xxx ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responsive.

Here is the screenshot from chrome dev console:

Initially, I thought the other dependency react-waypoint was causing the issue, but after some investigation, and thanks to lencioni's follow ups in https://github.com/brigade/react-waypoint/issues/143, I realised this may be caused by the combination of react with latest version of material-ui.

With material-ui version 0.16.5, the wheel Event Listeners becomes visible from Chrome's Dev Tool Element tab as follow: that has the passive: false property which could explain why the warning appears on the console as you scroll while the main thread is busy.

However, by reading a similar post about Consider marking event handler as 'passive' to make the page more responsive, I am a bit more confused, because it suggested that we may have to wait for your .js library to implement support. Before raising an issue on github to suggest such improvement, my confusing point was, which JS library / dependency sepcifically should we be waiting for?

In this particular case, is it react (see discussion)? or material-ui? Or something else that was completely missed from this question? The above screenshot indicated that the wheel event listener was added by ReactEventListener of react-dom, however, by downgrading material-ui version to 0.16.4, the warning goes away, because there is no wheel event listener.

So I'm basically on that crossroad of browser, react and 3rd party dependencies and trying to understand the variables that contribute to this problem and whether there is anything we, as a consumer of these libraries, could do to workaround this issue?

Any suggestions or comments would be highly appreciated! Thanks.

Answer 1

Just confirming that it is material-ui causing this as I'm not using 'react-waypoint' and am also experiencing it on MaterialUI v0.16.5 and React 15.4.x.

Update: Things seem to work fine for me after updating to MaterialUI v0.16.6.