title: How to make setInterval function triggered once while componentDidUpdate is fired 2 times
body: <p>I'm working on a React app, and I want to manage the user inactivity.</p>
  
  <p>For it, I defined a countdown which is supposed to be reset to his original value if the user is doing something in the App.</p>
  
  <p>The displayed components are rendered/surrounded by a Layout component.</p>
  
  <p>My problem is that the layout is updated twice after every user action, since the .setState function is used in it. Therefore, the InactivityManager Component also is updated twice and the setInterval is executed twice at the same time. </p>
  
  <p>I wrote a simple InactivityManager Component, which isn't rendering anything but is rendered in the Layout.</p>
  
  <p>Here is the component:  </p>
  
  <pre><code>import { Component } from 'react';
  import { isLogged, logout } from '...';
  
  
  class InactivityManager extends Component {
  
  
    constructor(props) {
      super(props);
      this.refreshRemainingTime = this.refreshRemainingTime.bind(this);
    }
  
    componentDidUpdate() {
      if (isLogged()) {
        clearInterval(this.refreshRemainingTime);
        localStorage.setItem('activityCountdown', '900');
        window.setInterval(this.refreshRemainingTime, 5000);
      }
    }
  
    refreshRemainingTime = () =&gt; {
      let activityCountdown = parseInt(localStorage.getItem('activityCountdown'), 10);
      activityCountdown -= 60;
      localStorage.setItem('activityCountdown', activityCountdown);
      if (activityCountdown &lt;= 0) {
        logout();
        localStorage.removeItem('activityCountdown');      
      }
    };
  
    render() {
  
      return null;
    }
  }
  
  export default InactivityManager;
  </code></pre>
  
  <p>Any idea of what is the best approach? Also tried to include the Component in the App.js but the  Component expect only one "Route" child.</p>
  
  <p>Thanks!</p>