I'm trying to setup a progress bar for a backend action that can take a while to complete.
I simplified the code in Codesandbox to reproduce the problem, in my Codesandbox, when clicking the button, I run useInterval to get a new random cat picture every 4 seconds and update my hook.
Codesandbox
As I understand, the problem is because I'm calling a Hook inside a custom Hook (useInterval), but I don't know another way to do this because native setInterval does not work with Hooks.
I used the use-interval package
You don't have to wrap useInterval
with useEffect
. Internally useInterval
calls useEffect
to do it work.
And you can change values passed to useInterval
in component and new values will be applied correctly. You can change delay or callback arguments and useInterval
will apply them.
To showcase, I've added stop button, which stops retrieving cats.
Here is working solution with cats :-)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With