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

[dbismut]

Hi! I'm testing useGesture with transient: true to avoid re-rendering on drag with react-spring and animated.div.

In the onAction callback, I'd like to set the spring coordinates to something that depends on the component state. However, onAction never reads the updated state. Is this by design? Wouldn't there be a way to tell onAction to recompute on re-render or on variable change similarly to React.useEffect?

Here is a link to a demo that shows the difference between transient and non transient mode when it comes to reading state: https://codesandbox.io/s/oj9y335nr5

The blue square is supposed to rest on a different position based on the number of times it's been clicked, which only works properly in non-transient.

I hope this is clear enough!

[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 react-gesture@3.0.1 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.