title: useState with callback not updating useCallback dependencies
body: <p>I have made a working example here:
  <a href="https://codesandbox.io/s/magical-flower-o0gyn?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/magical-flower-o0gyn?file=/src/App.js</a></p>
  <p>When I click the hide button I want to save the updated data to localstorage:</p>
  <ol>
  <li>I click hide on first column: <code>setValueWithCallback</code> runs, sets the callback to a ref &amp; sets the state</li>
  <li><code>useEffect</code> kicks in, calls the callback with the updated data</li>
  <li><code>saveToLocalStorage</code> is called, in a <code>useCallback</code> with <code>data</code> set as a dependency</li>
  </ol>
  <p>The problem is at the 3rd step, what gets saved to localstorage is <code>{visible: true}</code> for both.
  I know if I change this line:</p>
  <pre><code>const saveToLocalStorage = useCallback(() =&gt; {
    localStorage.setItem(
      `_colProps`,
      JSON.stringify(data.map((e) =&gt; ({ id: e.id, visible: e.visible })))
    );
  }, [data]);
  </code></pre>
  <p>To this:</p>
  <pre><code>const saveToLocalStorage = localStorage.setItem(
    `_colProps`,
    JSON.stringify(data.map((e) =&gt; ({ id: e.id, visible: e.visible })))
  );
  </code></pre>
  <p>It works, but I cannot get my head around, why it does not with the first. I assume it must be some closure thing, but I don't see it.</p>
  <p>If <code>data</code> has already been updated, and <code>useEffect</code> ran the callback, why it is not updated in the dependencies array?.
  Yes, the example is weird and the 2nd solution is perfectly fine, I just wanted to demonstrate the problem.
  Thanks for the help!</p>