title: Calling functions in componentDidUpdate. Error: React limits the number of nested updates
body: <p>When I get from api response object:</p>
  
  <pre><code>timeLoad =  {
    date: "2019-07-07 12:38:08+00",
    pend: true
  }
  </code></pre>
  
  <p>I want to set: </p>
  
  <pre><code>this.setState({
    time: this.props.timeLoad.second * 1000
  })
  </code></pre>
  
  <hr>
  
  <p>When I get from api response object:</p>
  
  <pre><code>timeLoad =  {
          date: null,
          pend: false
      }
  </code></pre>
  
  <p>I want to call function start().</p>
  
  <hr>
  
  <pre><code>componentDidUpdate(previousProps, previousState) {
      if (previousProps.timeLoad !== this.timeLoad) {
          if(this.props.timeLoad &amp;&amp; this.props.timeLoad.date &amp;&amp; 
           this.props.timeLoad.second) {
              this.setState({
                  time: this.props.timeLoad.second * 1000
              })
          } else {
              this.setState({
                  time: 0
              })
          }
      }
  }
  </code></pre>
  
  <p>Above code it works, but when I added: </p>
  
  <pre><code>if (this.props.timeLoad &amp;&amp; !this.props.timeLoad.date &amp;&amp; !this.props.timeLoad.pend) {
       this.start ();
  }
  </code></pre>
  
  <p>I have error: </p>
  
  <blockquote>
    <p>Uncaught Invariant Violation: Maximum update depth exceeded. This can
    happen when a component repeatedly calls setState inside
    componentWillUpdate or componentDidUpdate. React limits the number of
    nested updates to prevent infinite loops.</p>
  </blockquote>
  
  <p>How can I fix it?</p>
  
  <p>I tried  deep comparison with the property's value:
  <code>(previousProps.timeLoad.second !== this.timeLoad.second)</code> but I have error:</p>
  
  <blockquote>
    <p>Cannot read property 'second' of null.</p>
  </blockquote>
  
  <p>Not every object has the 'second' property or has 'null' property.</p>
  
  <pre><code>class Watch extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        timerOn: false,
        timerStart: 0,
        time: 0
      }
     }
  
      componentDidUpdate(previousProps, previousState) {
          if (previousProps.timeLoad !== this.timeLoad) {
              if(this.props.timeLoad &amp;&amp; this.props.timeLoad.second &amp;&amp; 
               this.props.timeLoad.second) {
                  this.setState({
                      time: this.props.timeLoad.second * 1000
                  })
              } else {
                  this.setState({
                      time: 0
                  })
              }
          }
  
          if(this.props.timeLoad  &amp;&amp; !this.props.timeLoad.date &amp;&amp; !this.props.timeLoad.pend){
              this.start();
          }
      }
  
  
      start = () =&gt; {
          this.setState({
              timerOn: true,
              time: this.state.time,
              timerStart: Date.now() - this.state.time
          });
          this.timer = setInterval(() =&gt; {
              this.setState({
                  time: Date.now() - this.state.time
              });
          }, 10);
  
          const url = `https://app/api/v1/asset/{id}`
  
          axios({ 
              method: 'post', 
              url, 
              data: this.item, 
              headers: { Authorization: `Bearer ${token}` }, 
              }) 
              .then(res =&gt; { 
                  this.setState({
                      startItem: res.data.item,
                  })
              }).catch(err =&gt; { 
                  console.log(err); 
              });
       };
  
          render() {
              return ( 
                  &lt;button className="play" onClick={this.start}&gt;
                      Button
                  &lt;/button&gt;
              );
          }
   }
  </code></pre>