title: How to get latest component variable value in 'useEffect' hook?
body: <p>How to use an updated value of a variable (declared at component scope) in each 'useEffect'?  </p>
  
  <pre><code>import React, { useState, useEffect } from 'react';
  
  export default function Count() {
  
      const [count, setCount] = useState(0);
  
      let a = 10;
  
      useEffect(() =&gt; {
          console.log('after 1st render', a);
          a++;
          console.log(a);
          return () =&gt; { console.log('cleanup - on unmount.') }
      }, [a]);
  
      useEffect(() =&gt; {
          console.log('only when count changes', a);
          a++;
          return () =&gt; { console.log('count cleanup', a) }
      }, [count, a]);
  
      return &lt;div&gt;
          &lt;p&gt;Count : {count}&lt;/p&gt;
          &lt;button onClick={() =&gt; { console.log('at global', a); setCount(count + 1) }}&gt;Click&lt;/button&gt;
      &lt;/div&gt;
  }
  </code></pre>
  
  <blockquote>
    <p>output<br>
    after 1st render 10<br>
    11<br>
    only when count changes 11<br>
    at global 12<br>
    count cleanup 12<br>
    only when count changes 10</p>
  </blockquote>
  
  <p>Now, What I don't understand from this output is the last line which outputs the value of 'a' as 10.</p>
  
  <p>Every time a useEffect gets called, it creates a new copy of the function provided, and it also calls the cleanUp function right?.</p>
  
  <p>when I click the button the count changes, the previous cleanUp gets called and clean that 'useEffect' behaviour which sets the value of 'a' from 11 to 12, and then the current 'useEffect' called with value 10. it should print the value 11. ? can anyone please clarify this.</p>