title: React.useMemo() and Event Listener
body: <p>I'm building a REACT App using Hooks, and now I'm facing an issue when using <code>useMemo()</code> and some event listener. i've, prepared a simpler demo of my problem on CodeSandBox: here's the link → <a href="https://codesandbox.io/s/mystifying-hertz-21jov?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer">https://codesandbox.io/s/mystifying-hertz-21jov?fontsize=14&amp;hidenavigation=1&amp;theme=dark</a>.</p>
  
  <p>Now, let me explain where's the problem: I have <code>buttonData</code> which is computed using <code>useMemo()</code>. Now, let's took a look into the console output:
  <a href="https://i.stack.imgur.com/HGKse.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HGKse.png" alt="enter image description here"></a></p>
  
  <p>At first, <code>buttonData</code> is computed on first render, and <code>buttonData.behavior</code> is equal to <code>test1</code>. Then, when I enter the button, inside <code>onMouseEnterButton</code> I use <code>setTargetDOM</code>: this will trigger <code>buttonData</code> to be recomputed, since <code>setTargetDOM</code> is one of its dependencies.<br>
  So far, so good:</p>
  
  <ol>
  <li>In the console first line, we see that <code>buttonData.behavior</code> is <code>test1</code>;</li>
  <li>In the second line we see that we enter <code>onMouseEnterButton</code>, and that right now <code>buttonData.behavior</code> is <code>test1</code>;</li>
  <li>In third line we see that, since <code>targetDOM</code> has changed, we have computed again <code>buttonData</code>, and now <code>buttonData.beavhior</code> is equal to <code>test2</code>;</li>
  </ol>
  
  <p>And now, here comes the problem, what I don't understand! I can somehow accept the fact that the fourth console line tells me that <code>buttonDat.behavior</code> is still <code>test1</code>, since we are still in the same function that changed <code>targetDOM</code> and thus triggered <code>buttonData</code> to change (even if I expected to see <code>buttonData.behavior: test2</code> even in the fourth line.</p>
  
  <p>What's even worste is that, inside <code>onMouseMoveButton</code> I see <code>buttonData.behavior</code> equals to <code>test1</code>, and not <code>test2</code>..</p>
  
  <p>The question is simple.. Why? I mean, I thought implementing this way I had <code>test2</code>, but I guess I'm missing some React Hook stuff right here.</p>