Im having a lot of trouble with this and i have tried various things. I want to call a function every second after i have clicked a start button and then have it paused after i click a stop button. I keep getting weird behaviour that i cant explain. How can i do this in react without classes?

somethings i have treid:

      const simulation = () => {
    if (!running) {
      console.log('hit');
      return

    } else {
      // console.log(grid);
      console.log('hey');
      setTimeout(simulation, 1000)
    }
  }

and

    enter  setInterval(() => {
    let newGrid = [...grid]
    for (let i = 0; i < numRow; i++) {
      for (let k = 0; k < numCol; k++) {
        let n = 0;
      }
    }
    console.log(grid);
  }, 5000)

I have tried a lot more, In some cases it would update the state should i have added to it but not updated it after i reset the state. How can i call a function to run every one second with updated values of state * Note the function that i want to run will update the state

Im having a lot of trouble with this and i have tried various things. I want to call a function every second after i have clicked a start button and then have it paused after i click a stop button. I keep getting weird behaviour that i cant explain. How can i do this in react without classes?

somethings i have treid:

      const simulation = () => {
    if (!running) {
      console.log('hit');
      return

    } else {
      // console.log(grid);
      console.log('hey');
      setTimeout(simulation, 1000)
    }
  }

and

    enter  setInterval(() => {
    let newGrid = [...grid]
    for (let i = 0; i < numRow; i++) {
      for (let k = 0; k < numCol; k++) {
        let n = 0;
      }
    }
    console.log(grid);
  }, 5000)

I have tried a lot more, In some cases it would update the state should i have added to it but not updated it after i reset the state. How can i call a function to run every one second with updated values of state * Note the function that i want to run will update the state

• javascript
• reactjs

• 1 Do you need accurate timing? – evolutionxbox Commented Jul 28, 2020 at 21:53
• I guess not - just consistent timing – Sid Commented Jul 28, 2020 at 21:58
• why do you need to update the state? Did you hear about hooks? and useEffect hook? – Mantas Brasiunas Commented Jul 28, 2020 at 21:58
• setInterval and setTimeout are not reliable for time tracking – Mantas Brasiunas Commented Jul 28, 2020 at 21:59
• I need to update the state because im recreating the game of life - Every 1 second i want to run a function that will change the state – Sid Commented Jul 28, 2020 at 22:00

2 Answers 2

You may do the following:

• keep track of the current counter value along with the counter on/off state in your component state;
• employ useEffect() hook to be called upon turning counter on/off or incrementing that;
• within useEffect() body you may call the function, incrementing count by one (if ticking is truthy, hence timer is on) with delayed execution (using setTimeout());
• once count variable is changed in the state, useEffect() gets called once again in a loop;
• in order to clean up the timer upon component dismantle, you should return a callback, clearing the timer from useEffect()

const { useState, useEffect } = React,
      { render } = ReactDOM,
      rootNode = document.getElementById('root')
      
const App = () => {
  const [ticking, setTicking] = useState(true),
        [count, setCount] = useState(0)
   
   useEffect(() => {
    const timer = setTimeout(() => ticking && setCount(count+1), 1e3)
    return () => clearTimeout(timer)
   }, [count, ticking])
   
   return (
    <div>
      <div>{count}</div>
      <button onClick={() => setTicking(false)}>pause</button>
      <button onClick={() => setTicking(true)}>resume</button>
    </div>
   )
}  

render (
  <App />,
  rootNode
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>

Late reply but maybe interesting for some people. Look at npm package cron. In this case every 15min As easy as:

const [job] = useState(new cron.CronJob("0 */15 * * * *",async ()=>{
    await updateRiderCoords();
}));
useEffect(() => {
    job.start();
}, []);