react-countup
react-countup copied to clipboard
Callbacks do not care about dependency list
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.
@ryancrunchi I'm not 100% sure, but I guess that there is preserveValue which can help with your case.
import { useCallback, useState } from "react";
import CountUp from "react-countup";
import "./styles.css";
export default function App() {
const initialValue = 0;
const [value, setValue] = useState(initialValue);
const handleClick = useCallback(() => {
setValue((old) => old + Math.round(Math.random() * 100));
}, []);
return (
<div className="App">
<CountUp preserveValue start={initialValue} delay={0} end={value}>
{({ countUpRef }) => <span ref={countUpRef} />}
</CountUp>{" "}
<button onClick={handleClick}>Test</button>
</div>
);
}
Ok but that’s not going to solve the case described in the issue. The onEnd callback always have old state/props. It’s not a matter of countup values, but the way it uses callbacks I will try to implement a more complex case to show you that
The example code sandbox has been updated with a more complex example https://codesandbox.io/s/react-typescript-forked-7leiul?file=/src/MyComponent.tsx
@ryancrunchi ok, I got your point. I guess that you are right about this. Will try to look through the fix soon. For now you can try this hack:
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import CountUp from "react-countup";
export type ComponentProps = {
items: { quantity: number }[];
};
const MyComponent = ({ items, ...rest }: ComponentProps) => {
// copy the items to own state to update them as needed
const [myItems, setMyItems] = useState(items);
const [disabled, setDisabled] = useState(false);
const total = useMemo(() => myItems.reduce((acc, v) => acc + v.quantity, 0), [
myItems
]);
const [initialValue] = useState(total);
useEffect(() => {
if (total === 0) {
setTimeout(() => {
setDisabled(true);
// 2000 - default duration
}, 2000);
}
}, [total]);
const handleClick = useCallback(() => {
setMyItems((old) =>
old.map((i) => ({ quantity: Math.max(0, i.quantity - 100) }))
);
}, []);
return (
<div>
<CountUp preserveValue delay={0} start={initialValue} end={total}>
{({ countUpRef }) => (
<span
style={{ color: disabled ? "red" : undefined }}
ref={countUpRef}
/>
)}
</CountUp>
<button disabled={disabled} onClick={handleClick}>
Test
</button>
</div>
);
};
export default MyComponent;
I found another workaround, maybe cleaner without timeout
const [refreshValue, refresh] = useReducer(x => x+1, 0)
const handleEnd = useCallback(() => {
console.log("end", { total });
refresh()
}, [total]);
useEffect(() => {
setDisabled(total === 0)
// don't set total in dependency or it will update as soon as total changes, what we don't want
}, [refreshValue])