First render after useLayoutEffect is ignored if animated value evaluated as 0

[Eliav2]

🐛 Bug Report

well, it's quite strange but this is probably a bug. the title describes the issue exactly.

I'm working on new major release for react-xarrows and wanted to move from svg animation to react-spring animation.

if one of the following conditions would met the issue would not appear:

• if you will change the effect hook from useLayoutEffect to useEffect .
• if you would change the initial value of the animated value to be truthy (==true) value. for example, set prop1 to 0.01 instead of 0 and refresh.

Unfortunately, react-xarrows updates the UI on useLayoutEffec phase to the best user experience. Changing the default value is not possible either.

To Reproduce

just go to sandbox

Expected behavior

the animation starts after useLayoutEffect fire with the new value, even after refresh(first render).

Link to repro (highly encouraged)

code sandbox: https://codesandbox.io/s/react-spring-issue-g4xkl

look at the console. you can see useSpring receives 20 but the UI stays on 0.

example description: MyComponent is a component with expensive to parse props. useParseProps parse the props whenever prop from user was changed and MyCompoenet consumes parsed props from the hook. this is how react-xarrows is written.

Environment

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

[joshuaellis]

Hey 👋🏼 thanks for the report, do you know if this is an issue with earlier versions of the library e.g 9.2.0? It helps narrow things down as I can see this being quite a tricky bug to find 🔍

[Eliav2]

after some testing in code sandbox i see this persists on any 9.x version. and by the way - this happens the specific case of exactly the initial value 0, so currently, as workaround I'm using 0.0000001 and its good enough as a workaround for me.