4Michael1Angelo5
commented
3 months ago 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?
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