react setState causing erratic array behaviour

Question

I'm calling my function every 10 seconds.

setInterval(this.getStudent, 10000);

Within the function it should grab the latest state of the students array.

getStudent() {
   const initialArr = this.state.students;
   const student = createStudent(); // this function works
                                     // it just returns a student object
   initialArr.push(student);
   this.setState({ students: initialArr });
}

If I console.log(this.state.students); it shows the creation of a student after 10 seconds just fine.

Object // After 10 seconds perfect!
   name: Liam Smith
   major: BIO
   ...

But after another 10 seconds (20 seconds total) it should just append one more newly created student. But it attaches an extra so looks like this:

[Object, Object, Object]

And then from there the timer gets all messed up and adds new students whenever it wants. But why is a react state causing this? How can I just simply add a student every 10 seconds?

Ps: I'm calling setInterval within render like so...

render() {
    setInterval(this.getStudent, 10000);

    console.log(this.state.cards);
    return (
      <div>
        ....

From where are you calling `setInterval`? It sounds like you're calling it in an inappropriate lifecycle method, hence you have multiple intervals running at the same time. — Dave Newton, Aug 18 '16 at 18:16

score 2 · Accepted Answer · edited May 23 '17 at 12:06

render() is called every time the component needs to re-render–like when you add a student.

Each time render() is called you start a new interval timer, e.g., each time you update state.students, you render, which starts a new timer, which leads to a new student, which leads to a new render, which leads to a lot of new timers, students, and renders, ad nauseum.

You'd want to start a single timer in something like componentDidMount(), e.g.,

componentDidMount() {
  setInterval(this.getStudent, 10000);
}

render() {
  return (
    <div>
      ...

(This may not satisfy your real requirements, e.g., if you have multiple components relying on the same list of students, this wouldn't be appropriate.)

Unrelated, but you're currently directly altering state by pushing onto the state.students array. This can go unpredictably bad for a variety of reasons–just something to keep in mind as you're moving forward. Correct modification of state arrays in ReactJS

react setState causing erratic array behaviour

1 Answers1