Function setInterval is not working in reactJs

Question

I want to call some function and update state after a time interval in react component but it is not working as expected. Here is my code.

componentDidUpdate(){
        console.log("update")
        setInterval(this.tickingTimer(), 2000)
    }
    tickingTimer(){
        this.state.counter = this.state.counter+1
        console.log("timer");
    }

I tried to set interval function in componentDidMount also but it only call once. It is not updating data after interval.

Shubham Khatri · Accepted Answer · 2020-05-07 14:25:50Z

3

You must not mutate state, instead use setState to update state. Also an interval must not be used within componentDidUpdate directly. The best place to have an interval is componentDidMount and the callback function to setInterval must not be triggered but passed as reference.

componentDidMount(){
    console.log("update")
    this.timerId = setInterval(this.tickingTimer, 2000)
}
tickingTimer(){
    this.setState(prev => ({counter: prevState.counter+1}));
    console.log("timer");
}
componentWillUnmount() {
    clearInterval(this.timerId)
}

NOTE: clear setInterval in componentWillUnmount

edited May 7, 2020 at 14:25

answered May 7, 2020 at 14:24

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

Collectives™ on Stack Overflow

Function setInterval is not working in reactJs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related