Consider marking event handler as 'passive' to make the page more responsive

[joyfulelement]

Hi:

I was using Chrome version: Version 55.0.2883.75 beta (64-bit) with react-waypoint and noticed the following warning message when I scroll with the mouse wheel:

I wonder if this warning would go away if we add the wheel event listener with the { passive: true } flag in react-waypoint?

[lencioni]

We don't add event listeners on wheel, but we do on scroll which is probably what caused this. However, this should be resolved as of v4.0.0. What version are you using?

[joyfulelement]

I was using 4.1.0 when this warning shows up.

I have since then reverted back to the previous version I used before the upgrade, i.e. 3.1.0, and with that, the warning does not show.

[lencioni]

Hmm, interesting. With 4.1.0, can you use chrome dev tools to look at the event listeners added to the page (in the Elements tab). Can you find the one added by waypoint and see if it says passive: true or passive: false?

[joyfulelement]

Ok, further investigation by using a different packages reveals different behaviour, so it took me a while to get to this information, but I think it does give us some interesting findings, and it may suggest the potential compatibility issue between these packages.

Chrome version Version 55.0.2883.75 beta (64-bit) was used throughout the following tests.

react-waypoint 3.1.0 + material-UI 0.15.3

The warning does not show up for the wheel event.

react-waypoint 4.1.0 + material-UI 0.15.3

The warning does not show up for the wheel event.

Both of the above combination shares the same list of Event Listener as shown below

react-waypoint 3.1.0 + material-UI 0.16.5

The warning does show up for the wheel event.

react-waypoint 4.1.0 + material-UI 0.16.5

The warning does show up for the wheel event.

Both of the above combination shares the same list of Event Listener as shown below

Warning

Findings

• There are multiple event listeners for both resize and scroll
• All of them being passive: false
• The wheel event listener also has passive: false which could explain why the warning appears on the console. However, this event listener only becomes available when using the latest version of material-UI (at this moment, it's 0.16.5) regardless of the version of react-waypoint being used.

Question

For some reason, based on the hover over with those blue links on the right under the Chrome Dev Event Listeners view, I can't tell which event listeners were actually added by react-waypoint since most of them are coming from material-UI & lodash. Is there a way to reveal this information?

Bottom line

With all these findings, apart from the question above, the leads suggested this issue may not be caused by react-waypoint afterall. If you also agree, and unless there are other evidence we could gather to disproof it, I'm ok for closing the case. Thanks!

[lencioni]

Thanks for the detailed investigation. I agree that it doesn't seem that react-waypoint is the culprit here. It sounds like it might be worth following up with some of the other packages that you are using to see if they can enable the passive option. It might be worth pointing them at consolidated-events which is what react-waypoint uses for managing this sort of thing.

[joyfulelement]

Thanks @lencioni, by any chance you know how to view the event listeners added by react-waypoint with Chrome Dev tool? And if there are viewable, are you suggesting that the event listeners has the passive: true flag instead being passive: false?

I noticed the wheel event was introduced by the latest version (15.4.1) of react-dom, but unsure if there is a way to access this from code...

[lencioni]

It looks like you have source maps, which should give you the actual filename of the module that added the event listener. I haven't verified but I believe that with react-waypoint v4 you should see an event listener added from the consolidated-events package, likely from the TargetEventHandlers.js module.

[lencioni]

Specifically, this is the line that adds the event listeners for react-waypoint: https://github.com/lencioni/consolidated-events/blob/d0ea74735de6a53a29e6273dcfa4a4d3ab0eb196/src/TargetEventHandlers.js#L44

[joyfulelement]

Thanks for the tips @lencioni !

I've located the resize event listeners added by react-waypoint and marked with passive: true flag as shown below:

However, according to https://github.com/brigade/react-waypoint/blob/master/src/waypoint.jsx#L141 , do we also expect another scroll event listeners added by react-waypoint? Which isn't available from the Chrome dev viewer.

[joyfulelement]

Further investigation on the wheel event shows that such event listener was added by ReactEventListener of react-dom, and seems that there is a related discussion about this: facebook/react#6436 (comment)

[lencioni]

However, according to https://github.com/brigade/react-waypoint/blob/master/src/waypoint.jsx#L141 , do we also expect another scroll event listeners added by react-waypoint?

No, that addEventListener is imported from consolidated-events, which is the one you found in Chrome dev tools: https://github.com/brigade/react-waypoint/blob/ab3215d8609b7c2c7405280dcd3ffca429259bc3/src/waypoint.jsx#L2

[joyfulelement]

Correct me if I'm wrong, so I think what you are trying to point out was by using consolidated-events, we were able to consolidate both resize & scroll event listener to just one, which happens to be listed under resize event listener on Chrome Dev tool?

[lencioni]

Close, but not quite. The idea behind consolidated-events is to combine multiple event handlers for the same event type on the same node into a single event handler. So, if you add multiple scroll events to the same node, it should only add one. It will not consolidate different types of event handlers (e.g. scroll and resize) into a single one. That is not possible.

Secondarily, it allows you to use options like the passive option without having to worry about browser compatibility.

[joyfulelement]

Thanks for the clarifications @lencioni , really learnt a lot today.

For the original issue with wheel event, I've posted a stackoverflow question to follow it up separately. Perhaps we can get some answers from there from the community. Thanks again for all the follow ups.