How can I use multiple refs for an array of elements with hooks? : <p>As far as I understood I can use refs for a single element like this:</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 { useRef, useState, useEffect } = React;

const App = () =&gt; {
  const elRef = useRef();
  const [elWidth, setElWidth] = useState();

  useEffect(() =&gt; {
    setElWidth(elRef.current.offsetWidth);
  }, []);

  return (
    &lt;div&gt;
      &lt;div ref={elRef} style={{ width: "100px" }}&gt;
        Width is: {elWidth}
      &lt;/div&gt;
    &lt;/div&gt;
  );
};

ReactDOM.render(
  &lt;App /&gt;,
  document.getElementById("root")
);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/react@16/umd/react.production.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"&gt;&lt;/script&gt;

&lt;div id="root"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>How can I implement this for an array of elements? Obviously not like that: (I knew it even I did not try it:)</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 { useRef, useState, useEffect } = React;

const App = () =&gt; {
  const elRef = useRef();
  const [elWidth, setElWidth] = useState();

  useEffect(() =&gt; {
    setElWidth(elRef.current.offsetWidth);
  }, []);

  return (
    &lt;div&gt;
      {[1, 2, 3].map(el =&gt; (
        &lt;div ref={elRef} style={{ width: `${el * 100}px` }}&gt;
          Width is: {elWidth}
        &lt;/div&gt;
      ))}
    &lt;/div&gt;
  );
};

ReactDOM.render(
  &lt;App /&gt;,
  document.getElementById("root")
);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/react@16/umd/react.production.min.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"&gt;&lt;/script&gt;

&lt;div id="root"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>I have seen <a href="https://github.com/facebook/react/issues/14072" rel="noreferrer">this</a> and hence <a href="https://github.com/facebook/react/issues/14490#issuecomment-454973512" rel="noreferrer">this</a>. But, I'm still confused about how to implement that suggestion for this simple case. </p>
