setInterval in a React app

react setinterval setstate
setinterval react native
react setinterval clearinterval
setinterval js
react setinterval es6
setinterval react codepen
setinterval in react lifecycle
react clock setinterval

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 & 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 (
      <section>
        {displayCount}
      </section>
    );
  }

});

module.exports = Clock;

setInterval in React Components Using Hooks, setInterval is a method that calls a function or runs some code after specific intervals of time, as specified through the second parameter. For example, the code below schedules an interval to print the phrase: “Interval triggered” every second to the console until it is cleared. setInterval(() => { console. The setInterval () function is used to invoke a function or a piece of code repeatedly after a specific amount of time. Example: setInterval(() => { console.log('you can see me every 3 seconds') }, 3000); The only way to stop the setInterval is by calling a clearInterval function with id or closing the window.

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 < 1) { 
      clearInterval(this.intervalId);
    }
  }
  componentDidMount() {
    this.intervalId = setInterval(this.timer.bind(this), 1000);
  }
  componentWillUnmount(){
    clearInterval(this.intervalId);
  }
  render() {
    return(
      <div>{this.state.currentCount}</div>
    );
  }
}

module.exports = Clock;

How to use setInterval in React - JavaScript, I have a code something like this : class Pomodoro extends React. I am working on the Pomodoro Clock Project and I am wondering how I can make the setInterval method to work in react. I have a getElementById('app') );. If you are using ES6 syntax for Reactjs web application development, when using "setInterval" you can not use class properties inside the "setInterval". It's because incorrect use of those functions inside the ES6 class.

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 = () => {
    const [currentCount, setCount] = useState(10);
    const timer = () => setCount(currentCount - 1);

    useEffect(
        () => {
            if (currentCount <= 0) {
                return;
            }
            const id = setInterval(timer, 1000);
            return () => clearInterval(id);
        },
        [currentCount]
    );

    return <div>{currentCount}</div>;
};

const App = () => <Clock />;

ReactDOM.render(<App />, document.getElementById('root'));

Canceling setInterval in React, (() => { setSeconds(seconds => seconds + 1); }, 1000); return () => clearInterval(interval); }, []); Clearing setInterval in React. A function or block of code that is bound to an interval executes until it is stopped. To stop an interval, you can use the clearInterval () method. For example, the code below schedules a new interval when the React component mounts for the first time.

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)
}

Window setInterval() Method, . The best place to do is right before the component unmounts (componentWillUnmount). Regardless, setTimeout() is probably the more common choice to implement in this situation (we’ll look at how in a little bit), but there is nothing wrong with using setInterval(). With either approach there are extra considerations we need to keep in mind when working in a React application (or any other single-page application, for that matter).

setInterval() and clearInterval() in React - Stacey Zander, () method will continue calling the function until clearInterval() is called, or the window is closed. Sometimes you need to run a command in an interval using window.setInterval. But if you don’t stop the interval when the component using the setInterval is not stopped, it will continuously run using unnecessary resources.

setInterval in React components (THE RIGHT WAY), I recently created a spatiotemporal data visualization app in React. It's called Migration Mapper, and it takes data from an animal tracking  Timers are an important part of an application and React Native implements the browser timers. Timers. setTimeout, clearTimeout; setInterval, clearInterval; setImmediate, clearImmediate; requestAnimationFrame, cancelAnimationFrame

Making setInterval Declarative with React Hooks, </a> of doing the same application. 12 <li>There should be <b>no React warnings</b> about trying to change the state of an unmounted component.</li>. 20. In this tutorial we will be using React to build a stopwatch timer and a countdown timer. Both timers will utilize intervals to keep track of time and can start, stop, resume, and reset. To begin…

Comments
  • bind(this) is no longer needed, react does this on its own now.
  • your timer method does not update currentCount
  • @Derek are you sure? I just got mine working by adding this.timer.bind(this) as this.timer on it's own did not work
  • @Theworm @Derek is wrong, kind of. React.createClass (which is deprecated) autobinds methods, but class Clock extends Component doesn't auto bind. So it depends on how you're creating your components whether you need to bind.
  • Thank you. This makes a lot of sense. I'm still very much a beginner and I'm trying to get a hold of how state works and what goes in which "chunks", like render.
  • I am wondering, though, is it necessary to use componentDidMount and componentWillUnmount to actually set the interval? EDIT: Just saw your most recent edit. :)
  • @Jose I think componentDidMount is the right place to trigger the client side events, so I would use it to initiate the countdown. What other method are you thinking about for initializing?
  • I didn't have anything else in particular in mind, but it seemed clunky to use so many "chunks" inside a component. I suppose it is just myself getting accustomed to how the bits and pieces work in React. Again, thank you!
  • There's no real need to store the setInterval value as part of the state because it doesn't affect the rendering
  • With React 16.8, React Hooks are available in a stable release.