title: Prevent re-render ReactJS when using setInterval()
body: <p>Hello guys ? So i'm developing web with React right now, and i need to make stopwatch timer that will be played when i click the button, so i use setInterval() method. But when i click the button and setInterval() is running, i got this warning from <a href="https://github.com/maicki/why-did-you-update" rel="nofollow noreferrer">why-did-you-update</a> library, which means to avoid re-rendering. I already use PureComponent but why when setInterval() is running some component still re-render? it makes lag guys, and if i stop setInterval with clearInterval() method the component is stop re-rendering.</p>
  
  <p><a href="https://i.stack.imgur.com/UOSOM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UOSOM.png" alt="enter image description here"></a></p>
  
  <p>The code just like this:</p>
  
  <pre><code>startTimer() {
    // Test
    this.setState(
      prevState =&gt; ({
        ...prevState,
        isSessionStarted: true,
        duration: prevState.duration,
        startedAt: Date.now() - prevState.duration
      }),
      () =&gt; {
        this.timer = setInterval(
          () =&gt;
            this.setState(prevState =&gt; ({
              duration: Date.now() - prevState.startedAt
            })),
          1000
        );
      }
    );
  }
  
  stopTimer() {
    this.setState({ isSessionFinished: true }, () =&gt; {
      clearInterval(this.timer);
    });
  }
  </code></pre>
  
  <p>Any solution? Thank you before.</p>