glennreyes / glennreyes/react-countup

Callbacks do not care about dependency list

Open
#687 5 comments 0 reactions 0 assignees View on GitHub
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.