React - How to autoincrement number from 0 to a certain value

Question

When I load my page in React I want some value to increment from 0 to certain given value (let's say 50 ), so as a page loads I want to see value incrementation from 0 to 50 ( 0 1 2 3 4 ... 50 ) I've tried this

  const [number, setNumber] = useState(0);
  const limiter = 50;

 React.useEffect(() => {
    const incrementer = setInterval(() => {
        if (number === limiter) {
            clearInterval(incrementer);
        } else {
            setNumber(number+1);
        }
    }, 500);
},[]);

But for some reason it goes like ( 0 1 1 2 0 1 2 0 )

@giorgimoniava No I've set everything but for some reason it gets stuck at some random number like 45 or 30 — mne_web_dev, Nov 12 '21 at 20:54

Someone Special · Answer 1 · 2021-11-12T22:18:16.377

Why your code doesn't work

The reason why your code doesn't work is because you did not use your state number as a dependency. This means your useEffect won't get the latest value of number for your if (number === limiter) comparison.

Working Solution

This will be a working solution, and you need to clearInterval before declaring a new setInterval.

the variable timer also has to be set outside the function so it doesn't get re-declared everytime it renders.

let timer; 
const App = () => {
   const [ counterState, setCounter ] = React.useState(0)
  React.useEffect(() => {
   clearInterval(timer)
   timer = setInterval(() => {
      if (counterState === 100) {
         clearInterval(timer)
         return
       }
      setCounter(prev => prev+1)
      counter++
      
   },10)
  
   return () => clearInterval(timer)
  },[counterState])

  return (<div>{counterState}</div>)
}

 ReactDOM.render(<App />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>

PS: setTimeout works as well.

I've tried this but for some reason it stops incrementing counter at number 23 ( if I increment from 0 to 50 ) — mne_web_dev, Nov 12 '21 at 22:29
You have tried exact same codes? Do note my comment on why your code doesn't work. In fact, your codes are wrong. — Someone Special, Nov 13 '21 at 07:04
If you're going to do something like this, at least make it a timeout, you're basically creating and destroying intervals every frame. — Arthur Bruel, Nov 15 '21 at 18:43

score 0 · Answer 2 · answered Nov 12 '21 at 21:11

0

React.useEffect(() => {
  const incrementer = setInterval(() => {
    setNumber((c) => {
      if(c < limiter) return c+1;
      clearInterval(incrementer);
      return c;
    });
  }, 500);
},[]);

answered Nov 12 '21 at 21:11

Arthur Bruel

678
3
12

React - How to autoincrement number from 0 to a certain value

2 Answers2

Why your code doesn't work

Working Solution