[useGesture] Transient mode: is there a way to read state?

[pmndrs]

[useGesture] Transient mode: is there a way to read state?

[drcmda]

This is how hooks work, you never can access hook state in events, it's all stale data. One way to get around this is using useRef, this is also in the hooks docs. Another thing i did today was change how bind works, it's a function now that lets you inject stuff (see frontpage), "transient: true" also isn't needed, just the callback.

[dbismut]

Thanks @drcmda I'm trying to play with [email protected] but bind() returns Object {onMouseDown: undefined, onTouchStart: undefined}, see here: https://codesandbox.io/s/jpwjzkpqv

Not sure what I'm doing wrong 😬

[drcmda]

Here's the fixed box: https://codesandbox.io/s/740lo2k9y1

The problem was that you got "interpolate" from react-spring, react-spring/hooks is a separate bundle, so it's gotta be import { interpolate, config, animate, useSpring ........ } from "react-spring/hooks" But the interpolate function isn't actually needed, you only use it if you interpolate multiple values, so i remove it.

Another thing to watch out for is that in transient mode the event fires immediately, before your count => count + 1 can render out

[dbismut]

Oh ok thank you so much! I’ll close this then 👌

[dbismut]

Oops sorry @drcmda one last question: is the Transient component supposed to re-render at every frame of the drag event? I thought the point of transient was to prevent re-rendering?

EDIT: oh and if you could just briefly explain way RAF is needed there that would be great!

[drcmda]

No, and it doesn't. The log output is from the event handler, the component only renders once per click (because of the set function that is called). You can remove the RAF. Then you will get an outdated count because the click event fires before React renders set(count => count + 1). RAF puts you one frame behind React.

[dbismut]

Right sorry, everything’s crystal clear! Thanks a million.