title: React ref.current is null in useEffect cleanup function
body: <p>I'm trying to access a ref during clean up (before the component unmounts).</p>
  <p>Like so:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const Comp = () =&gt; {
      const imgRef = React.useRef();
  
      React.useEffect(() =&gt; {
        console.log('component mounted', imgRef); // During mount, imgRef.current is always defined
        return () =&gt; {
          console.log('component unmounting', imgRef); // imgRef.current always null here
        }
      }, []);  // also tried adding imgRef and imgRef.current still doesn't work in clean up
  
      return (
        &lt;img src={'example.png'} ref={imgRef} /&gt;
      );
  
  };
  const App = () =&gt; {
    const [img, setImg] = React.useState(true);
    return &lt;div&gt;
      &lt;button onClick={() =&gt; setImg(!img)}&gt;toggle&lt;/button&gt;
      {img &amp;&amp; &lt;Comp /&gt;}
    &lt;/div&gt;;
  };
  ReactDOM.render(&lt;App /&gt;, document.querySelector('.react'));</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"&gt;&lt;/script&gt;
  &lt;script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"&gt;&lt;/script&gt;
  &lt;div class='react'&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Even adding <code>imgRef</code> in the <code>useEffect</code>'s dependency, the imgRef.current is still null in the return of useEffect...</p>
  <p>This works in the equivalent Class component with <code>componentWillUnmount</code> the imgRef is properly defined.</p>
  <p>How can I make it work with hooks?</p>