glennreyes / glennreyes/react-countup
Callbacks do not care about dependency list
- Dominant language
- JavaScript
- Stars
- 2.1k
- Forks
- 138
- PR merge metrics
- No merged PRs in 30d
Description
When I use CountUp with an `onEnd` callback with dependency list of variables, the values of theses variables are always the same initial ones. Because useCountUp hook does not react to props changes as defined in https://github.com/glennreyes/react-countup/blob/0ed22d3c8bf9668ec9d6b7035870b79c04127e6c/src/useCountUp.ts#L59-L72
Maybe the useEventCallback hook is not the good place to be used here as the callbacks of countup can be redefined during rendering. useEventCallback is used when the function is ensured to not be called during render. Which is not the case with countup. We can redefined `onEnd` while the countup animation is in progress.
In the following example you can see in console that the value or initialValue are always 0. Despite they should go up at each countup end event.
Expected behaviour : `initialValue` takes the value of `value` at the end of animation
Current behaviour : `initialValue` is always 0 because `value` in `handleEnd` callback is not updated
https://codesandbox.io/s/react-typescript-forked-7leiul?file=/src/MyComponent.tsx
PS: I know countup has an update function and should not be used the way this example is. But it doesn’t change the fact that callbacks always have outdated values in dependency list. Also, in my production app, I have a more complex use case with cached data as props, that update a counter state and this counter update another state on end which also depends on cached data (set in dependency list). But with current implementation my cached data are the old one in the callback due to this issue above. And the state is not updated accordingly at end of countup animation.
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.