setState getting updated multiple times

Question

I am incrementing a counter by setState() of React using a setInterval method. But for every intervals the application is updating multiple times.

import React, { Component } from 'react';

export default class Arrival extends Component {
state = {
    count: 0,
    limitTo: 6
  }
  render() {
    try {
      setInterval(() => {
        this.setState({
          limitTo: this.state.limitTo + 6
        })
        console.log(this.state)
      }, 5000);
    } catch(err) {
      console.log(err)
    }
  return()
}
}

In the first 5 seconds, the state is getting updated once.

In the next 5 seconds, the state is getting updated 2 times.

In the next 5 seconds, the state is getting updated 4 times. and so on...

I want the state to only get updated once every 5 seconds.

move setInterval() to componentDidMount()

Joseph D.
– Joseph D.

2019-10-22 08:07:15 +00:00
Commented Oct 22, 2019 at 8:07 — Joseph D.
– Joseph D., Commented Oct 22, 2019 at 8:07

Jee Mok · Accepted Answer · 2019-10-22 11:13:31Z

1

when the state update, the component will be also updated and re-render, hence the setInterval should not be inside render method. You can do this instead:

class Arrival extends Component {
  state = {
    count: 0,
    limitTo: 6
  };

  interval = 0;

  componentDidMount() {
    try {
      this.interval = setInterval(() => {
        this.setState({
          limitTo: this.state.limitTo + 6
        });
        console.log(this.state);
      }, 5000);
    } catch (err) {
      console.log(err);
    }
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return <div />;
  }
}

Note: reminded by @FrankerZ, you should also clean up the interval when the component unmounts, otherwise the clock will keep ticking ;)

edited Oct 22, 2019 at 11:13

answered Oct 22, 2019 at 8:15

Jee Mok

6,6068 gold badges54 silver badges83 bronze badges

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

1 Comment

Blue Over a year ago

You should include cleanup code if the component unmounts

cegas · Accepted Answer · 2019-10-22 12:54:53Z

1

setInterval() is called in render() method. This means that:

It will be set off the first time it is rendered. Timers ticking: 1.
After 5 seconds, it will fire and change the state. It means the component will need to rerender.
Rendering starts another timer, since setInterval() is called in render() method. Timers ticking: 2.
Another 5 seconds pass. First timer ticks again, which causes component to rerender due to state change. Another timer is set off. Timers ticking: 3.
Second timer ticks for the first time. Another rerender happens and causes a 4th timer to be started. Timers ticking: 4.
Ad infinitum

To solve this, move setInterval to componentDidMount() as recommended by another answer to ensure the timer is started once only, not on each render.

edited Oct 22, 2019 at 12:54

answered Oct 22, 2019 at 8:17

cegas

3,2613 gold badges20 silver badges19 bronze badges

Collectives™ on Stack Overflow

setState getting updated multiple times

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related