vydimitrov/use-count-up

Dynamically changing values makes animation not work

Closed this issue · 4 comments

carl0shd commented

Hi, since the update 3.0.1, changing values dynamically breaks the animation, the value changes instantly. I prepared a simple example to reproduce the bug.

const [dynamicValue, setValue] = useState<number>(700);

  const { value } = useCountUp({
    isCounting: true,
    start: 200,
    end: dynamicValue,
    duration: 2,
    decimalPlaces: 2
  });

  useEffect(() => {
    setTimeout(() => {
      setValue(2000);
    }, 4000);
  }, []);

The animation starts good, but when the timeout executes, the value changes immediately, before 3.0.1 it worked perfectly.

vydimitrov commented

Hey, are you sure that it worked before, check his demo that is using version 2.x.x - https://codesandbox.io/s/sharp-cdn-10l9s?file=/src/index.js

carl0shd commented

Hey, are you sure that it worked before, check his demo that is using version 2.x.x - https://codesandbox.io/s/sharp-cdn-10l9s?file=/src/index.js

Yeah, i am sure, i am executing the code that I have put in the issue, but i am using React Native, I don't know if that makes any difference.

vydimitrov commented

It should be the same. Can you do an ExpoSnack to reproduce the issue?

carl0shd commented

It should be the same. Can you do an ExpoSnack to reproduce the issue?

sorry, it ended up being my mistake, I needed to restart the animation with reset. something strange is that before it worked without restarting it, but now is fixed on my end, and I couldn't reproduce the error in a sandbox.

Thanks for your fast response.

Have a good day.

  • 👍1