Time-dependent change of state in ReactJS

Question

In React I like to increment a state-value (progressValue) every 500 ms from 0 to 100. This is what I do:

    const [progressValue, setProgressValue] = React.useState<number>(0)

    const tick = () => {
        console.log("progressValue: " + progressValue)
        if (progressValue >= 100) {
            setProgressValue(100)
        } else {
            const newValue = progressValue + 0.1
            setProgressValue(newValue)
            setTimeout(tick, 500)
        }
    }

    const onPlayClicked = () => {
        setProgressValue(0)
        tick()
    }

Unfortunately the log says

progressValue: 0
progressValue: 0
progressValue: 0
...

What's wrong?

EDIT

This worked finally:


    const [progressValue, setProgressValue] = React.useState<number>(0)

    React.useEffect(() => {
        const interval = setInterval(() => {
            if (progressValue < 100) {
                setProgressValue((prevVal) => prevVal + 1);
            }
        }, 500);
        return () => clearInterval(interval);
    }, [progressValue]);

Call your state updater in a setinterval to create in useEffect — le3th4x0rbot
– le3th4x0rbot, Commented Jun 13, 2023 at 13:04
I was not able to find a working solution with useEffectand setInterval. The examples here stackoverflow.com/questions/72592921/… don't work, too... — Benvorth
– Benvorth, Commented Jun 13, 2023 at 13:27

innocent · Accepted Answer · 2023-06-13 13:48:19Z

1

The reason why its not incrementing is to do with references. when you execute the onPlayClicked function. It sets the progressValue to 0 and when tick is executed the progressValue which is still 0 is set to 0.1. we are then again calling the tick function which contains the same progressValue reference set to 0. Hence, the progress value always stays the same.

Now coming to solving this issue. The easy way to solve this is by just using the previous state. Inside your tick function in the setProgressValue you can just do the following.

setProgressValue(prevState=>prevState+0.1);

Full working snippet:

const {useState} = React;
const App = () => {
  const [progressValue, setProgressValue] = React.useState(0);

  const tick = () => {
    if (progressValue >= 100) {
      setProgressValue(100);
    } else {
      setProgressValue((prev) => prev + 0.1);
      setTimeout(tick, 500);
    }
  };

  const onPlayClicked = () => {
    setProgressValue(0);
    tick();
  };

  return (
    <div className="App">
      <h1>Demo</h1>
      <span>{progressValue}</span>
      <br />
      <button onClick={onPlayClicked}>Click Me</button>
    </div>
  );
}

ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <App />
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>

answered Jun 13, 2023 at 13:48

innocent

9658 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kennarddh Over a year ago

You can use toFixed to avoid 0.00000001

innocent Over a year ago

i know it was just a demo for updating values. so made changes to the bare mimimum

Collectives™ on Stack Overflow

Time-dependent change of state in ReactJS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related