title: Why is clearTimeout not clearing the timeout in this react component?
body: <p>I am attempting to clear a former timeout before initiating a new timeout, because I want messages to display for 4 seconds and disappear UNLESS a new message pops up before the 4 seconds is up. The Problem: Old timeouts are clearing the current message, so clearTimeout() is not working in this component, in this scenario:</p>
  
  <pre><code>
    let t; // "t" for "timer"
  
    const [message, updateMessage] = useState('This message is to appear for 4 seconds. Unless a new message replaces it.');
  
    function clearLogger() {
      clearTimeout(t);
      t = setTimeout(() =&gt; {
        console.log('wiping message');
        updateMessage('');
      }, 4000);
    }
  
    function initMessage(msg) {
      updateMessage(msg);
      clearLogger();
    }
  
  </code></pre>
  
  <p>The funny thing is that this works:</p>
  
  <pre><code>  function clearLogger() {
      t = setTimeout(() =&gt; {
        console.log('wiping message');
        updateMessage('');
      }, 4000);
      clearTimeout(t);
    }
  </code></pre>
  
  <p>...but obviously defeats the purpose, since it just immediately obliterates the timeout.
  In practice, I should be able to trigger <strong>initMessage()</strong> every two seconds and never see, "wiping message' logged to the console. </p>