Multiple Bugs - please see stackblitz example

[4Michael1Angelo5]

1) calling setNum() after the first render results in the next setNum call not animating to the correct number if first setNum(number) = this.state.number. IE initialize with number state = 1954, then call setNum(1954), next setNum() call will not animate and instead show all zeros.

2) State updates to sibling components result in animated numbers going to zero. This error can also be reproduced if rendering a sibling component conditionally (Not just conditionally modifying the style).

example: https://stackblitz.com/edit/vitejs-vite-p9hrid?file=src%2FApp.jsx

[4Michael1Angelo5]

Additionally, I observed that error 1 does not occur in chrome incognito browser. I suspect this could be a problem with browser cache and the useMemo() hook or React.memo(AnimatedNumber, (prevProps, nextProps) => {} Most likely when you do it the first time the error will not be reproduced, but if you keep refreshing the window eventually the problem is reproducible. Clearing the browse cache when the component unmounts might be the solution. Alternatively is it really necessary to memorize the dom calculations, are they that expensive?

[knutmarius]

If I re-render the component with new props, I sometimes experience all-zero values like you describe, but cannot say for sure when and why it happens. Are there any known workarounds?