title: React - getting "Rendered more hooks than during the previous render" error
body: <p>I have the following component:</p>
  
  <pre><code>const [eventCounter, setEventCounter] = useState(0)
  
  let subsectionRefs = data ? Object.values(data).reduce((acc, event) =&gt; {
      acc[event.id] = useRef();
      return acc;
  }, {}) : {};
  
      const setRankChangeFocus = eventID =&gt; {
      setEventCounter(eventCounter + 1);
      window.scrollTo(0, subsectionRefs[eventID].current.offsetTop);
  };
  
  return (
                      &lt;Comp
                          key={event.id}
                          onRankChange={(value) =&gt; {
                              setRankChangeFocus(value);
                          }}
                      /&gt;
  </code></pre>
  
  <p>)</p>
  
  <p>Essentially, i want <code>subsectionRefs</code> to re-initalize itself every time <code>setRankChangeFocus(value)</code> is called from the child component <code>Comp</code>.</p>
  
  <p>However, i'm getting the "Rendered more hooks than during the previous render" error when i load the page - why? What am i doing wrong?</p>