[bug]: useState and api.start cause dom attributes not updated

[1587315093]

Which react-spring target are you using?

• [X] @react-spring/web
• [ ] @react-spring/three
• [ ] @react-spring/native
• [ ] @react-spring/konva
• [ ] @react-spring/zdog

What version of react-spring are you using?

9.7.1

What's Wrong?

When api.start and useState are executed together, the property on the dom that judges x to be 0 is not updated

To Reproduce

Here is my minimal rendition @joshuaellis

link: https://codesandbox.io/s/awesome-joana-t28gsz?file=/src/App.tsx

You can see that data-count is not updated correctly but x is already 0

Expected Behaviour

attributes update

Link to repo

https://codesandbox.io/s/awesome-joana-t28gsz?file=/src/App.tsx

[1587315093]

This is the original issue #2174 I have provided a minimal repro, please verify @joshuaellis

[1587315093]

I will associate this comment with an issue, don't pay attention

https://github.com/ant-design/ant-design-mobile/issues/6184

[Bilalshaikh15]

please assign it to me, I will start working on this issue.

[Bilalshaikh15]

<animated.div data-count={x.to((v) => (v !== 0 && (x.goal !== 0 || count > 0) ? "none" : "auto"))}

By including count > 0 in the condition, the data-count attribute will only be set to "none" if both the animated value x is not 0 and either the goal value of the animation is not 0 or the count state is greater than 0.

let me know is this was the issue or something else.

[1587315093]

This is just an example of the dom attribute not updating

The essential problem is that the attributes are not updated

Don't care about the role of none and auto, because this is my custom

[1587315093]

@Bilalshaikh15 someone work?

[1587315093]

@aleclarson @drcmda @joshuaellis have time to look at this question？