[useSpring] onStart callback triggered on each frame

[dbismut]

Hey! Thanks for this fantastic library.
I'm trying the useSpring hook which I understand is experimental, and maybe this is by design or maybe this is me not using useCallback or misusing hooks, but I find onStart being triggered on each frame.

Here is the isolated codesandbox showing the issue: https://codesandbox.io/s/oj9y6j6z9q
As you can see, dragging the box triggers a console.log at each frame.
If you uncomment the commented onStart function which increments a state counter, the onStart function is run continuously...

[ruggedy]

the problem is useSpring updates the internal animation controller on every rerender(i.e every time you call setState). there should be some sore of diffing of props, i.e if the props passed down are the same, then skip update.

[ruggedy]

a partial working example here. the problem now is if you pass a value that is an object or array, that is created in the params function i.e useSpring({x: 0, from: {x:0}), then the reference changes everytime which re-triggers the update. @drcmda let me know what you think about this?

[drcmda]

That's interesting. onStart in hooks, i have to think about it. It's true that if you update, it theoretically "starts" - whatever this means, this is where the lines between declarative and imperative get blurry.

[dbismut]

@ruggedy it stopped running onStart continuously when updating state from it (which is already a great thing!), but it still renders on every render generated by useGesture — which as you said in your first comment is expected since useSpring updates on every re-render.

So I tried using the transient mode in useGesture and update the spring without triggering a render: https://codesandbox.io/s/1rnp87kp1j

In this case, the component is not re-rendered on drag, so I wouldn't expect useSpring to be updated, but still, the onStart is run at every dragged frame as you can observe from the logs.

I'm sure there is a logic explanation for all this, and maybe we're reaching the limits of hooks there I don't know 😅

[ruggedy]

@dbismut yh it is actually working correctly, because now you are updating the internal animation controller everytime useGesture calls onAction, which technically starts a new animation everytime.

just a suggestion, as I havent used react-with-gesture yet, but maybe instead of listening to mousedown event, you can listen to the mouseup event, and animate from that position back to zero.

this is what I assume the code might look like.

onAction: ({ up, xDelta, xVelocity }) => {
      up && set({ from: { x: xDelta}, x: 0 })
}

just a wild guess.

edit: just checked and realised that you were using react spring to set the translate based on the mousemove xDelta. so the above will not work. but I will keep looking into this and let you know once I have something.

[aleclarson]

This is fixed in v9, which you can now try: yarn add react-spring@next

Let us know how it goes: #642

[dbismut]

Yes this does work, thanks @aleclarson!