title: React - useState not updating when used inside of useEffect
body: <p>In my project, I want to save all <code>console.log</code>'s in an array.
  I created a simple example that represents what I am trying to do.</p>
  <ol>
  <li>A simple button that when pressed - logs to the console.</li>
  <li>An array for all logged messages</li>
  <li>An <code>useEffect</code> hook that overrides the <code>console.log</code> function.</li>
  </ol>
  <p>However, the array doesn't get bigger than 1 item.</p>
  <p>The code:</p>
  <pre><code>import { useState, useEffect } from &quot;react&quot;;
  
  export default function App() {
    const [myLogs, setMyLogs] = useState&lt;any[]&gt;([]);
  
    useEffect(() =&gt; {
      var log = console.log;
      console.log(&quot;from useEffect&quot;);
      console.log = function () {
        var args = Array.prototype.slice.call(arguments);
        log.apply(this, args);
        setMyLogs({ ...myLogs, ...args });
      };
    }, []);
  
    return (
      &lt;div&gt;
        &lt;button onClick={() =&gt; console.log(&quot;clicked :)&quot;)}&gt;Click to Log&lt;/button&gt;
        &lt;p&gt;{myLogs.toString()}&lt;/p&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p><a href="https://codesandbox.io/s/reactconsolelogtovariable-b20e6?file=/src/App.tsx" rel="nofollow noreferrer">Codesanbox link</a></p>
  <p>I tried adding <code>myLogs</code> as a dependency to the <code>useEffect</code> hook thinking it might help but it just created an infinite loop. (This part I understand)</p>