api.set does not work for useSprings hook

[fast-reflexes]

Intro

When doing animations, we sometimes have the need to set a value without animating it. An example is when showing a tooltip when hovering over a certain area of the screen; as long as the mouse is in this area, we want to animate the positional changes of the tooltip but if we move out of the area from the left, and then enter the area from the right, we want to position the tooltip at the place of entrance immediately, while at the same time setting it to be visible. I was happy to find the complementary api.set and api.start for these occasions.

🐛 Bug Report

The above behaviour works great for useSpring, but not for useSprings. On https://react-spring.io/hooks/use-springs there is the following example:

api.start(index => ({ opacity: 0 }))

where you think it's possible to use the api returned by useSprings to make individual changes to the returned springs. This is also the case, but only for the api.start method, not for the api.set method. As I do the same for set:

api.set(index => ({ opacity: (100 - index) / 100 }))

the editor complains and the expected effect does not happen. The same kind of change works great with useSpring.

To Reproduce

Check https://codesandbox.io/s/react-spring-usesprings-bug-z2hic and follow the instructions there

Steps to reproduce the behavior:

Simply use useSprings and try to run api.set for individual springs on its returned api and the set effect will not take place.

Expected behavior

I expect the behaviour of useSpring to be the exact same in useSprings but generalized over multiple springs. I also expect the api.start method of useSprings to be similar to api.set which it does not appear to be.

All in all, this means that I expect api.set to work and that it should have the same effect as api.start but without an animation, but instead an immediate resulting effect.

Link to repro (highly encouraged)

https://codesandbox.io/s/react-spring-usesprings-bug-z2hic

Environment

• react-spring v9.3.0
• react v17.0.2

Thanks for a GREAT library! 🌹

[alexwidua]

Not sure if the abstinence of api.set() on useSprings is a bug or intented, but to anyone running into the same 'problem': Instead of trying to use api.set(...), return an immediate: true prop value in addition to your spring values.

ex. api.start((i) => { return { ..., immediate: true } })

[uelibaumgartner]

@alexwidua I have the same issue... unfortunately if I use api.start I guet a weird glitch where I see one frame of the element moving, which I don't get with api.set.

Would be great if some one could implement the missing piece of the api

[eden-lane]

I have the exact same problem. set works in code sandbox, but doesn't work in my project. I can't find the difference, everything looks the same 🤔

[AndriesVDW]

Any news on this? I'm having the same problem.

[joshuaellis]

Is the issue here that the api returned from useSprings when calling set can only set them all as opposed to being able to set a specific spring based on in the index?

[AndriesVDW]

Is the issue here that the api returned from useSprings when calling set can only set them all as opposed to being able to set a specific spring based on in the index?

Yes!

[joshuaellis]

Okay well this is an enhancement to the current SpringRef, it should be fairly straight forward if someone wants to take a look at it. Otherwise there is no news unfortunately, i'm short on bandwidth.

[AndriesVDW]

I think I fixed it in the pull request I just made.

[iyinchao]

Just encounted the same issue, Now I'm using multiple controllers for each spring, but the enhancement above could be very handy, please consider to add this, thank you! @joshuaellis