How can I tell my counter to stop incrementing when it has reached a specific amount? - react-native

Question

I'm trying to implement a counter that stops when it has reached a certain amount, but what I have at the moment doesn't stop. It seems to increment continuously; why is this? Does it have something to do with when or how many times useEffect is executed?
const [counter, setCounter] = useState(0);
useEffect(() => {
if (counter < 10) {
const interval = setInterval(() => {
setCounter(counter => counter + 1);
}, incrementRate);
return () => clearInterval(interval);
}
}, []);
return (
<View>
<Text>Circular progress bar</Text>
<Text>{`${counter}`}</Text>
</View>
);

Answer 1

You're using the useState functional updater inside your effect, which means it will use its previous state to increment the count, which is correct but it gives you a false perception that the effect is working correctly. Your mental model for how useEffect works needs to a shift a little, it's really common, so much so Dan Abramov has written an extensive article on useEffect with this exact scenario.
The quick fix is to add counter to your dependency array, so that you can tell React its changed, so it will no longer skip updating the effect.
useEffect(() => {
if (counter < 10) {
const interval = setInterval(() => {
setCounter((counter) => counter + 1);
}, incrementRate);
return () => {
clearInterval(interval);
};
}
}, [counter]);
It's not the cleanest approach as you'll clear the interval and create a new one each time the effect runs.
You could however use setTimeout instead and avoid the clearing of intervals altogether.
useEffect(() => {
if (counter < 10) {
setTimeout(() => {
setCounter((counter) => counter + 1);
}, incrementRate);
}
}, [counter]);