title: React hooks and functional component ref
body: <pre><code>const Comp1 = forwardRef((props, ref) =&gt; {
      useImperativeHandle(ref, () =&gt; ({
      print: () =&gt; {
        console.log('comp1')
      }
    }), []);
    return &lt;div&gt;comp1&lt;/div&gt;
  });
  
  const Comp2 = () =&gt; &lt;div&gt;comp2&lt;/div&gt;;
  
  const App = () =&gt; {
    const ref1 = useRef(null);
    const ref2 = useRef(null);
  
    useEffect(() =&gt; {
      console.log(ref1); // prints ref1 with the expected current  
      console.log(ref2); // prints ref2 with current: null
    })
    return &lt;div&gt;&lt;Comp1 ref={ref1}/&gt;&lt;Comp2 ref={ref2}/&gt;&lt;/div&gt;
  }
  </code></pre>
  
  <ol>
  <li>What's the difference between Comp1 and Comp2 refs?</li>
  <li>Why do I have to use forwardRef along with useImperativeHandle in order to actually get the ref to Comp1?</li>
  </ol>
  
  <p><a href="https://codepen.io/benma/pen/mddEWjP?editors=1112" rel="noreferrer">https://codepen.io/benma/pen/mddEWjP?editors=1112</a></p>