title: componentDidUpdate causing infiinite loop
body: <p>I have been working on a small todo application to learn and get my head around some react. Everything has been going according to plan up until I started with the completed section of the application. The problem I am trying to solve is probably pretty simple, however, I cannot seem to wrap my head around what is going on. What I am trying to do is invoke my <strong>createCompletedList</strong> method so I can create all of the items that have been completed. Although, when the method is invoked in the <strong>componentDidUpdate</strong> method it creates an infinite loop that crashes the browser. Is there any way that I can call the <strong>createCompletedList</strong> method that is safe from this kind of behaviour? </p>
  
  <p>Any sort of advice or information would be greatly appreciated.</p>
  
  <hr>
  
  <pre><code>import React, { Component } from "react";
  
  class Completed extends Component {
    constructor(props) {
      super(props);
      console.log(props);
      this.state = {
        completedItems: []
      };
  
      this.checkIndex = this.checkIndex.bind(this);
      this.createCompletedList = this.createCompletedList.bind(this);
    }
  
    checkIndex(event) {
      console.log("index value is " + this.props.indexValue);
    }
  
    createCompletedList() {
      const completedIndex = this.props.indexValue;
      const completedArray = this.state.completedItems;
  
      if (completedIndex) {
        completedArray.push(this.props.arrayItems[completedIndex]);
        this.setState(prevState =&gt; {
          return { completedItems: completedArray };
        });
      }
  
      console.log(this.state.completedItems);
    }
  
    componentDidUpdate() {
      this.createCompletedList();
    }
  
    render() {
      let completedArray = this.state.completedItems;
  
      const retrieveList = completedArray.map((elm, index, arr) =&gt; {
        return (
          &lt;div className="check-list-row checked" key={index}&gt;
            {elm}
          &lt;/div&gt;
        );
      });
      return (
        &lt;div
          className={this.props.isTaskChecked ? "completed-container" : "hide"}&gt;
          &lt;div className="completed-row"&gt;
            &lt;h1&gt;Completed&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div&gt;
            {retrieveList}
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  export default Completed;
  </code></pre>