title: Multiple refs in react
body: <p>I have a Container, that should have references to some of it's children components: </p>
  
  <pre><code>const Container = () =&gt; {
    const blocks: HTMLDivElement[] = [];
  
    return (
      &lt;div&gt;
        &lt;Navigation currentBlock={currentBlock} blocks={blocks} /&gt;
        &lt;div ref={(ref) =&gt; ref &amp;&amp; blocks.push(ref)}&gt;
          // ...
        &lt;/div&gt;
        &lt;div ref={(ref) =&gt; ref &amp;&amp; blocks.push(ref)}&gt;
          // ...
        &lt;/div&gt;
        &lt;div ref={(ref) =&gt; ref &amp;&amp; blocks.push(ref)}&gt;
          // ...
        &lt;/div&gt;
        &lt;div ref={(ref) =&gt; ref &amp;&amp; blocks.push(ref)}&gt;
          // ...
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p>But, when I try to render <code>Navigation</code> component, the <code>blocks</code> variable is an empty array.</p>
  
  <p>I tried converting <code>blocks</code> variable to a reference using <code>useRef</code> hook:</p>
  
  <pre><code>const Container = () =&gt; {
    const blocks = useRef&lt;HTMLDivElement[]&gt;([]);
  
    return (
      &lt;div&gt;
        &lt;Navigation currentBlock={currentBlock} blocks={blocks.current} /&gt;
        &lt;div ref={(ref) =&gt; ref &amp;&amp; blocks.current.push(ref)}&gt;
          // ...
        &lt;/div&gt;
        &lt;div ref={(ref) =&gt; ref &amp;&amp; blocks.current.push(ref)}&gt;
          // ...
        &lt;/div&gt;
        &lt;div ref={(ref) =&gt; ref &amp;&amp; blocks.current.push(ref)}&gt;
          // ...
        &lt;/div&gt;
        &lt;div ref={(ref) =&gt; ref &amp;&amp; blocks.current.push(ref)}&gt;
          // ...
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p><code>blocks</code> is still an empty array on render, but after that it becomes a valid array of references that I wanted.</p>
  
  <p>Is there any way to update <code>Navigation</code> component without rerendering <code>Container</code>? </p>
  
  <p><strong>EDIT</strong>:
  Here's my <code>Navigation</code> component:</p>
  
  <pre><code>const Navigation = ({ currentBlock, blocks }: { currentBlock: number, blocks: MutableRefObject&lt;HTMLDivElement[]&gt;}) =&gt; {
    console.log(blocks.current);
    return (
      &lt;nav&gt;
        {blocks.current.map((_, idx) =&gt; (
          &lt;NavigationLink key={idx} active={currentBlock === idx} /&gt;
        ))}
      &lt;/nav&gt;
    );
  }
  </code></pre>
  
  <p>In my console, I have this output:</p>
  
  <p><a href="https://i.stack.imgur.com/CbDfG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CbDfG.png" alt="Screenshot"></a></p>
  
  <p>The <code>Navigation</code> component doesn't render any <code>NavigationLink</code>s, as if the array is empty. </p>