Draggable current drag lost during React re-render

[JesusTheHun]

See case : https://codesandbox.io/s/react-gsap-draggable-forked-02s6z?file=/index.js

 

As you rotate, the rotation value is passed up in the hierarchy, triggering a refresh of the parent component, and therefore of the child component. All values are reset and the current dragging is interrupted.
This does not happen if the state is held in the Tile component itself, but I want to separate those concerns.

I also tried to memoized the component, but the drag is still lost.

 

Is there a way to recover the current dragging ?

[OSUblake]

Your Draggable dependency array changes on every render, creating a new Draggable on every render. You should use useCallback to prevent that.

 

https://codesandbox.io/s/react-gsap-draggable-forked-yr7km?file=/index.js

 

 

[JesusTheHun]

Silly mistake, my bad.

What if I actually needed a re-render, is there a way?

 

Edit :

I tried in my original code and it doesn't work. Yet I see no difference.

As I drag I want to update the viewbox of the parent svg. I made a simplified yet (I assume) correct example here : https://codesandbox.io/s/react-gsap-draggable-forked-ivt18?file=/index.js

Of course it's a dumb example I have some business logic around the viewbox update, it's just a more complex `onMove` function, nothing crazy.

[OSUblake]

1 hour ago, JesusTheHun said:

What if I actually needed a re-render, is there a way?

 

Everything is being re-rendered while dragging. That's what shows the rotation values. The useCallbacks just prevent the effect that creates the Draggables from firing again.

 

[JesusTheHun]

Yh true, for some reason the way gsap operates confuses me. Thanks for you fast replies

[OSUblake]

It's really not GSAP that should be confusing. React's change detection is just really bad. React uses Object.is to detect if something has changed, which will always be true if you use an function, inline function, array, or object that has not been stored in a hook. They call it a feature. I call it a major design flaw.

 

[JesusTheHun]

It's not really GSAP per se, it's its management of React behaviour, I should say.

As for React change detection, I will not enter this debate  usability, dx, performance ... pros and cons.

[OSUblake]

Change detection really isn't an issue when using class components. The problems is with hooks because closure don't work. They fixed one problem, and created another.

 

 

BTW, here's another approach. You can just store the callback in a ref. 

 

https://codesandbox.io/s/react-gsap-draggable-forked-u9gse?file=/index.js

 

That's kind of the approach recommend in this article.

https://overreacted.io/making-setinterval-declarative-with-react-hooks/