What's the new bound effect in v10 useDrag?

[cwrichardson]

If I have useDrag's bind hooks attached to a div and click-and-hold on it, with @use-gesture/[email protected] code profiler shows

Drag:
        Recognizers:
                2 Memo: {_targetEventStore: {…}, config: {…}, gestureEventS…}
                3 Effect: ƒ bound effect() {}      <- this fires
                4 Effect: ƒ () {}

whereas in otherwise identical code but using [email protected] the code profiler shows

Drag:
        2 Ref: f memoized() {}
        Recognizers:
                3 Memo: {bind: ƒ () {}, classes: Set(1), clean: ƒ () {}, co…}
                4 Effect: ƒ () {}

and nothing fires. I looked through the change logs, but couldn't find anything about the bind function and memoization changing. What is this new effect doing? (and what was previously memoized that isn't anymore?)

Thanks!

[dbismut]

This is a bit of a shot in the dark as it's been a long time, but trying to gather my thoughts.

This is v7: https://github.com/pmndrs/use-gesture/blob/v7/src/Controller.ts

This is v10 (highlighting the useEffect):

use-gesture/packages/react/src/useRecognizers.ts

Line 36 in 3d85b2c

React.useEffect(ctrl.effect.bind(ctrl))

So v10 rebinds the handlers on every render. I believe this has some collateral functional benefits (besides from a cleaner codebase, but I can't recall exactly what), and the performance penalty is negligible (essentially binding is adding / removing listeners and some string manipulations that aren't really expensive).

Let me know if you experience a performance downgrade between the two versions, I'll be happy to have a look (but the only way you could actually see it is by performing a state update on every drag event frame for example, which is in any case not recommended!).

[cwrichardson]

OK, thanks for this. And apologies for taking so long to revert, but it turns out I was down the wrong rabbit hole and it took me a while to figure it out. Let me know if you'd prefer the below to be a new question, rather than a reply in this thread, and if so, I'll move it.

Turns out, it's not a performance issue, it's a backwards compatibility / breaking change issue.

I'm fiddling around with react-csv-importer, which is generally super cool, and seems well maintained. However, as part of my fiddling, I accidentally updated their dependencies to the current version of use-gesture, which ended up breaking things. They have a dependency on the old react-use-gesture package, and in their deployment on npm, it's actually built with 7.0.16.

In tracking down the breakage, I had thought it was tied to this event firing; however, I seem to have been mistaken. Upon further investigation, it seems to be tied to 8.1.0-alpha.1 breaking change. (i.e., it works fine at release 8.0.1, but not at that, which is the next commit.

Once I got that far, since the commit said it was a breaking change, I was hoping to find some documentation on how to work around it; however, the 9.0.0 release notes (which, AFAICT, are the next doc update) say, "This is no breaking change in the API and it's very likely that no code will break, but it's still a major shift. Please report any undesirable behavior." So ... I guess I'm reporting undesirable behavior ... a couple of years late :)

From my perspective, I guess I can continue to work with 7.0.16 (or even 8.0.1), but while react-csv-importer is tiny in comparison to you guys, they're still getting ~1k downloads per week, and it seems undesirable to have that many people stuck on a codebase that's EOL.

Their package is really quite complicated, but I've simplified it as much as I can to demonstrate the problem in this codesandbox. You can grab the blue box, and drag it to the "drag here" area, then you can drag it back off again. To see the problem, simply invert the commented import at the beginning of App.js:

//import { useDrag } from '@use-gesture/react';
import { useDrag } from 'react-use-gesture';

Then, you can still drag the blue box to the "drag here" area, but when you try and drag it back off, it freezes.

If there's anything I can do to help figure out how to properly work with the newer package releases, let me know. In particular, I can go back and add extensive comments to that codesandbox if you'd like, but ... I didn't want to exert that effort if you weren't going to look at it (and, to be fair, I wouldn't blame you for not wanting to look at a problem in 2 year old code). So ... let me know if either you'd like me to do anything, or if you see some obvious way to fix the problem.

Thanks for your help, and great work with this package!

[dbismut]

I'll have a look at their package and make a PR with the latest use gesture.

[dbismut]

@cwrichardson see beamworks/react-csv-importer#74