[bug]: SpringValue.set doesn't schedule update to interpolation on first render
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 29.1k
- Forks
- 1.2k
- PR merge metrics
- No merged PRs in 30d
Description
Which react-spring target are you using?
-
@react-spring/web -
@react-spring/three -
@react-spring/native -
@react-spring/konva -
@react-spring/zdog
What version of react-spring are you using?
10.0.1
What's Wrong?
so in our app
the top console log is from inside the to callback and the bottom console log is from the function that called entryValue.set in useResizeObserverAsSpringValue (see the codesandbox repro thing for gdfjhbgskj)
basically the call to entryValue.set seems to do nothing the first time it happens and doesn't properly schedule the interpolation to update
the next time the value is set and all other times works fine, just not the first time
To Reproduce
I guess call a springvalue.set inside a useEffect when the springvalue is part of an interpolation that already got passed to an animated.div, or something like that
repro has it and reproes consistently
Expected Behaviour
the call to springvalue.set should update the interpolation
https://github.com/user-attachments/assets/eadad35e-aee8-4e71-a7b1-41d196a8189e
watch this video maybe (has audio)
Link to repo
https://codesandbox.io/p/sandbox/stupefied-field-xv4m7q
I apologize for the sloppy bug report I am just super tired rn
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the CodeSandbox reproduction and trace the call from useResizeObserverAsSpringValue through entryValue.set, the SpringValue interpolation, and animated.div. Confirm that the first set fails to update while later sets work, then add a regression test covering the first-render case and verify that the interpolation updates as expected.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100