Set in [x, set] = useSpring(() => ({ ... })) is not callable

[CodyJasonBennett]

🐛 Bug Report

useSpring does not expose a callable method in [x, set] = useSpring(() => ({ ... })).

This is related to #1118 where this issue was first raised but passed off as a depreciation.

Reproduction | Workaround

Environment

• react-spring v9.0.0
• react v17.0.1

[a-type]

I think returning a "ref" as the second tuple item (as v9 seems to do) potentially brings better usage and more flexibility in the long run, but the current API behaves strangely. The ref returned for a single useSpring hook is geared toward multi-spring usage, so instead of returning a Promise from .start (the equivalent to the "set" 2nd tuple item in the old usage) it returns an array of Promises with one item.

Perhaps a medium can be reached by having useSpring and other 'singular' hooks return a different kind of SpringRef which deals with just the one controller.

[joshuaellis]

@a-type i think thats a good idea, if we can detect if its a single spring then we just return the first child of the array? This would need applying to all the hooks so it's consistent & we'd probably need to fix some tests too... What do you think @CodyJasonBennett?

[CodyJasonBennett]

Sounds good to me, @joshuaellis.

Does the testing pipeline still need work?

[joshuaellis]

I think if we can get the testing pipeline to run, and go from there. But I wouldn't let that hold us back on implementing this feature....

[RenaudRohlinger]

In the meantime instead of set you can use springRef.current[0].start() :

https://codesandbox.io/s/usespring-rotation-w4il9?file=/src/index.js

[joshuaellis]

In the meantime instead of set you can use springRef.current[0].start() :

https://codesandbox.io/s/usespring-rotation-w4il9?file=/src/index.js

thanks @RenaudRohlinger I can update those codesandbox examples now for everyone so they work 😄

[danielberndt]

Here's the changes that made it work with v9.0.0:

before:

const [props, set] = useSpring(() => ({height: 100}));
set({height: newVal});

after:

const [props, spring] = useSpring(() => ({height: 100}));
spring.update({height: newVal});

[a-type]

Does update trigger animation? My understanding is it only enqueues a change which will be flushed when calling start.

One of the reasons I'm not so hot on SpringRef being an external API for imperative control is that a lot of its methods expose internal concerns (like queue control, adding and removing spring controllers, etc) but their naming is vague enough to sound useful. .set for example would seem to be the equivalent of the old set function, but it's actually set({ immediate: true, ... }).

If it's not too late, it would probably be better to rename some of these methods.

.update -> .enqueueUpdate
.start -> .play (or .run)
.set -> .immediate

.start is a hard one because usage when orchestrating a sequence of animations makes its naming difficult to keep semantic.

spring.equeueUpdate({ ... });
// also drains the update from above
await spring.play({ ... })[0];
await spring.play({ ... })[0];

[inspectordanno]

I'm experiencing a quite drastic bug after updating from the v9 RC candidate to the current 9.0.0 release, and I think it is related to this issue, and I was wondering if I can get some help.

Unfortunately I cannot post the exact code, but I will attempt to recreate it here.

Before, I would pass a function with an object to useSpring(), get a set function out of that, and everything would be fine and dandy. Then, I would use useEffect() to run the set function, ie:

const config = {
 from: { opacity: 0 },
 to: { opacity: 1 },
 config: { duration: 500 }
}


const [ spring, set ] = useSpring(() => config)

useEffect(() => {
  set(config)
}, [someDependency])

Now, this workflow is all broken. The second argument in the destructured array is a ref, not a set function, which is not what the documentation says. Also, I see there is a new dependency array syntax introduced in V9, where you put the array of dependencies in the useSpring() call. But after I did this, I was still not getting a set function back - it was still the ref:

const [ spring, set] = useSpring(() => config, [someDependency])

And also, was confused from the v9 documentation: why do I still even need to douseEffect() again if the dependency is in useSpring():

useEffect(() => {
  set(config)
}, [someDependency])

I'm very confused and would appreciate any help. Thank you so much!

[joshuaellis]

@inspectordanno please open a question, do not put questions in existing issues, it creates noise when maintainers are trying to solve issues.