setInterval in a React app

Question

I m still fairly new at React  but I ve been grinding along slowly and I ve encountered something I m stuck on    I am trying to build a  timer  component in React  and to be honest I don t know if I m doing this right  or efficiently   In my code below  I set the state to return an object   currentCount  10   and have been toying with componentDidMount  componentWillUnmount  and render and I can only get the state to  count down  from 10 to 9    Two-part question  What am I getting wrong  And  is there a more efficient way of going about using setTimeout  rather than using componentDidMount  amp  componentWillUnmount    Thank you in advance   import React from  react    var Clock   React createClass      getInitialState  function         return   currentCount  10            componentDidMount  function         this countdown   setInterval this timer  1000           componentWillUnmount  function         clearInterval this countdown           timer  function         this setState   currentCount  10             render  function         var displayCount   this state currentCount--      return          lt section gt           displayCount         lt  section gt                   module exports   Clock

User · Answer

If anyone is looking for a React Hook approach to implementing setInterval. Dan Abramov talked about it on his blog. Check it out if you want a good read about the subject including a Class approach. Basically the code is a custom Hook that turns setInterval as declarative.

function useInterval(callback, delay) {
  const savedCallback = useRef();

  // Remember the latest callback.
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  // Set up the interval.
  useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      let id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}

Also posting the CodeSandbox link for convenience: https://codesandbox.io/s/105x531vkq

User · Answer

Updated 10-second countdown using class Clock extends Component  import React    Component   from  react    class Clock extends Component     constructor props       super props       this state    currentCount  10        timer         this setState         currentCount  this state currentCount - 1            if this state currentCount  lt  1           clearInterval this intervalId               componentDidMount         this intervalId   setInterval this timer bind this   1000         componentWillUnmount        clearInterval this intervalId         render         return         lt div gt  this state currentCount  lt  div gt                module exports   Clock

User · Answer

Thanks  dotnetom   greg-herbowicz  If it returns  this state is undefined  - bind timer function   constructor props       super props       this state    currentCount  10      this timer   this timer bind this

User · Answer

Updating state every second in the react class  Note the my index js passes a function that return current time   import React from  react    class App extends React Component     constructor props       super props       this state           time  this props time                       updateMe         setInterval     gt  this setState  time this state time    1000                render      return        lt div className  container  gt         lt h1 gt  this state time    lt  h1 gt         lt button onClick       gt  this updateMe    gt Get Time lt  button gt       lt  div gt           export default App

User · Answer

Manage setInterval with React Hooks    const  seconds  setSeconds    useState 0     const interval   useRef null     useEffect      gt    if  seconds     60  stopCounter       seconds      const startCounter        gt  interval current   setInterval      gt        setSeconds prevState   gt  prevState   1       1000     const stopCounter        gt  clearInterval interval current

User · Answer

Updated 10-second countdown using Hooks  a new feature proposal that lets you use state and other React features without writing a class  They   re currently in React v16 7 0-alpha    import React    useState  useEffect   from  react   import ReactDOM from  react-dom    const Clock        gt        const  currentCount  setCount    useState 10       const timer        gt  setCount currentCount - 1        useEffect               gt                if  currentCount  lt   0                    return                            const id   setInterval timer  1000               return      gt  clearInterval id                       currentCount              return  lt div gt  currentCount  lt  div gt       const App        gt   lt Clock   gt    ReactDOM render  lt App   gt   document getElementById  root

User · Answer

I see 4 issues with your code    In your timer method you are always setting your current count to 10 You try to update the state in render method You do not use setState method to actually change the state You are not storing your intervalId in the state   Let s try to fix that   componentDidMount  function        var intervalId   setInterval this timer  1000         store intervalId in the state so it can be accessed later     this setState  intervalId  intervalId        componentWillUnmount  function           use intervalId from the state to clear the interval    clearInterval this state intervalId       timer  function           setState method is used to update the state    this setState   currentCount  this state currentCount -1         render  function            You do not need to decrease the value here     return          lt section gt          this state currentCount         lt  section gt             This would result in a timer that decreases from 10 to -N  If you want timer that decreases to 0  you can use slightly modified version   timer  function        var newCount   this state currentCount - 1     if newCount  gt   0            this setState   currentCount  newCount          else          clearInterval this state intervalId

[javascript] setInterval in a React app

Examples related to javascript

Examples related to reactjs

Examples related to settimeout

Examples related to state