title: Handling of 'wheel' input event was delayed for xxx ms due to main thread being busy
body: <p>I was using Chrome version: <code>Version 55.0.2883.75 beta (64-bit)</code> with <code>material-ui</code> (<a href="https://github.com/callemall/material-ui" rel="nofollow noreferrer">https://github.com/callemall/material-ui</a>) version <code>0.16.5</code> with <code>react</code>+<code>react-dom</code> version <code>15.4.1</code> and noticed the following warning message when I scroll down the page with the mouse wheel:</p>
  
  <blockquote>
    <p>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.</p>
  </blockquote>
  
  <p>Here is the screenshot from chrome dev console:
  <a href="https://i.stack.imgur.com/4tF8d.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4tF8d.png" alt="enter image description here"></a></p>
  
  <p>Initially, I thought the other dependency <code>react-waypoint</code> was causing the issue, but after some investigation, and thanks to lencioni's  follow ups in <a href="https://github.com/brigade/react-waypoint/issues/143" rel="nofollow noreferrer">https://github.com/brigade/react-waypoint/issues/143</a>, I realised this may be caused by the combination of <code>react</code> with latest version of <code>material-ui</code>.</p>
  
  <p>With <code>material-ui</code> version <code>0.16.5</code>, the <code>wheel</code> Event Listeners becomes visible from Chrome's Dev Tool Element tab as follow: 
  <a href="https://i.stack.imgur.com/wG9Be.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wG9Be.png" alt="enter image description here"></a>
  that has the <code>passive: false</code> property which could explain why the warning appears on the console as you scroll while the main thread is busy. </p>
  
  <p>However, by reading a similar post about 
  <a href="https://stackoverflow.com/questions/39152877/consider-marking-event-handler-as-passive-to-make-the-page-more-responive">Consider marking event handler as &#39;passive&#39; to make the page more responsive</a>, I am a bit more confused, because <strong>it suggested that we may have to wait for your .js library to implement support</strong>. Before raising an issue on github to suggest such improvement, my confusing point was, <strong>which JS library / dependency sepcifically should we be waiting for?</strong> </p>
  
  <p>In this particular case, is it <code>react</code> (see <a href="https://github.com/facebook/react/issues/6436" rel="nofollow noreferrer">discussion</a>)? or <code>material-ui</code>? Or something else that was completely missed from this question? The above screenshot indicated that the <code>wheel</code> event listener was added by <code>ReactEventListener</code> of <code>react-dom</code>, however, by downgrading <code>material-ui</code> version to <code>0.16.4</code>, the warning goes away, because there is no <code>wheel</code> event listener. </p>
  
  <p>So I'm basically on that crossroad of browser, <code>react</code> and 3rd party dependencies and trying to understand the variables that contribute to this problem and <strong>whether there is anything we, as a consumer of these libraries, could do to workaround this issue?</strong> </p>
  
  <p>Any suggestions or comments would be highly appreciated! Thanks.</p>