Jump to content
GreenSock

JesusTheHun

Draggable current drag lost during React re-render

Moderator Tag
Go to solution Solved by OSUblake,

Recommended Posts

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 ?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

 

  • Like 1
Link to comment
Share on other sites

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 :D usability, dx, performance ... pros and cons.

Link to comment
Share on other sites

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.

 

image.png

 

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/

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×