title: How to add "refs" dynamically with react hooks?
body: <p>So I have an array of data in and I am generating a list of components with that data. I'd like to have a ref on each generated element to calculate the height. 
  I know how to do it with a Class component, but I would like to do it with React Hooks.</p>
  
  <p>Here is an example explaining what I want to do:</p>
  
  <pre><code>import React, {useState, useCallback} from 'react'
  const data = [
    {
      text: 'test1'
    },
    {
      text: 'test2'
    }
  ]
  const Component = () =&gt; {
    const [height, setHeight] = useState(0);
    const measuredRef = useCallback(node =&gt; {
      if (node !== null) {
        setHeight(node.getBoundingClientRect().height);
      }
    }, []);
  
    return (
      &lt;div&gt;
        {
          data.map((item, index) =&gt; 
            &lt;div ref={measuredRef} key={index}&gt;
              {item.text}
            &lt;/div&gt;
          )
        }
      &lt;/div&gt;
    )
  }
  </code></pre>