title: React re-evaluate useRef if props change
body: <p>A Child component has got an array of ref who depend of parent props. I would like to update the ref list if props change without rerender my child component. </p>
  
  <pre class="lang-js prettyprint-override"><code>const childComponent = (props) =&gt;
  {
    // the array of ref item list
    const itemsRef = Array.from({ length: props.menuItems.length }, a =&gt; 
    useRef(null));
  
    useLayoutEffect(()=&gt;
    {
     // enter anim new item ref...
  
    },[props.menuItem])
  
  
    return &lt;ul&gt;
      {props.menuItems.map((el,i) =&gt; 
        &lt;li 
          key{i} 
          ref={itemsRef[i]}
          children={el.name}
       &gt;}
    &lt;/ul&gt;
  
  }
  </code></pre>
  
  <p><code>itemsRef</code> is not recalculate if parent updated pass a new list of menuItem by props.</p>
  
  <p>How achieve this with hooks? </p>