How to do passive:false event listeners in React?

Question

I need to do event.preventDefault() in an onWheel handler, because of a niche UI requirement where mousewheel will control a 'zoom' effect in a certain element.

But React sets passive: true on wheel events, so event.preventDefault() doesn't work.

Is there some escape hatch that lets you attach events manually in a safe way?

The only way I know is to use a ref and call ref.current.addEventListener within a useEffect. And I've tried that and it seems to work, but I think it goes against official advice, because (if I understand correctly) React won't know to re-run the effect if ref.current changes. And that would be a serious bug if it happens in the wild. Is there a safer way to do it?

Answer 1

You are doing it right. If React does not provide a way for you to do it, then use the "escape hatch" they provide to get around that. Infact, scrolling is listed as one of the valid use cases for refs here https://react.dev/learn/manipulating-the-dom-with-refs

The ref element should not change as it is being managed by React. And if it does, it will trigger a re-render where you can catch any changes.