home
Friday, July 22, 2022

OnWheel Event Fired Twice In React Gesture Library

When using onwheel events in [@use-gesture/react](https://github.com/pmndrs/use-gesture) library, I was surprised because the event always fired twice even that I just moved the wheel once.

After diving into the code of handling onwheel events in React Gesture library, I found that was by design and not a bug. For the last onwheel event, the library will fire onwheel event twice with field active changing from true to false. Here is the code of React Gesture's onwheel event handler:

wheelChange(event) {
    // ... some code here

    this.compute(event);
    this.emit(); // --> fire onwheel event
  }

  wheelEnd() {
    if (!this.state._active) return;
    this.state._active = false; // set active field to false
    this.compute();
    this.emit(); // --> fire the final onwheel event
  }

So to prevent the duplication, in my code, I have to check active=true before handling other logic.

The active field also is mentioned in React Gesture's document, but honestly, I had no idea how to use it when I first read the document.

top