title: Why doesn't useRef trigger a child rerender in this situation?
body: <p>I'm running into an issue where my hobbies list is not being displayed if it was previously undefined.</p>
  <p>The goal is to cycle through a list of hobbies and display them in the UI. If one hobby is passed, only one should be displayed. If none are passed, nothing should be displayed.</p>
  <p>Basically, <code>setHobbies([&quot;Cycling&quot;])</code> followed by <code>setHobbies(undefined)</code> correctly turns off the hobbies render, but then the next <code>setHobbies([&quot;Reading&quot;])</code> doesn't show up.</p>
  <p>Using a debugger I've been able to verify that the relevant code in the useEffect hook in EmployeeInfoWrapper does get triggered, and hobbiesRef.current set accordingly, but it doesn't cause EmployeeInfo to rerender.</p>
  <p>Container:</p>
  <pre><code>const Container = () =&gt; {
    const [hobbies, setHobbies] = React.useState&lt;string[]&gt;();
    setLabels([&quot;Board games&quot;]); // example of how it's set; in reality this hook is passed down and set in lower components
    return (
      &lt;SpinnerWrapper hobbies=hobbies otherInfo=otherInfo /&gt;
    );
  };
  </code></pre>
  <p>EmployeeInfoWrapper:</p>
  <pre><code>export const EmployeeInfoWrapper = (props) =&gt; {
    const { hobbies, otherInfo } = props;
    const [indx, setIndx] = React.useState&lt;number&gt;(0);
    // this doesn't work due to https://github.com/facebook/react/issues/14490, shouldn't matter though because it's handled in the useEffect 
    const hobbyRef = React.useRef(hobbies?.length ? hobbies[indx] : &quot;&quot;);
  
    useEffect(() =&gt; {
      if (hobbies?.length &gt; 1) { // doubt this is relevant as my bug is with 0 or 1-length hobbies prop
        hobbyRef.current = hobbies[indx];
        setTimeout(() =&gt; setIndx((indx + 1) % hobbies.length), 2000);
      }
  
      if (hobbies?.length == 1) {
        hobbyRef.current = hobbies[indx]; // can see with debugger this line is hit
      }
  
      if (!hobbies?.length) { // covers undefined or empty cases
        hobbyRef.current = &quot;&quot;;
      }
    }, [hobbies]);
  
    return (
      &lt;EmployeeInfo hobby={hobbyRef.current} otherInfo={otherInfo} /&gt;
    );
  };
  </code></pre>