title: "React has detected a change in the order of Hooks" but Hooks seem to be invoked in order
body: <p>I am trying to use <code>Context</code> and <code>Reducers</code> via React's hooks, and running into problems with the order of the hooks not being constant. My understanding was that as long as the order of the <code>useHook(…)</code> remained the same, it was fine to invoke the returned state/update function/reducer in any sort of control flow. Otherwise, I'm invoking the hooks at the very beginning of the FunctionComponents. </p>
  
  <p>Is it that I'm generating <code>Days</code> in a loop? Or missing something else?</p>
  
  <pre><code>Warning: React has detected a change in the order of Hooks
  called by Container. This will lead to bugs and errors if not fixed. For
  more information, read the Rules of Hooks:
  https://reactjs.org/docs/hooks-rules.html
  
     Previous render            Next render
     ------------------------------------------------------
  1. useContext                 useContext
  2. undefined                  useRef
     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  </code></pre>
  
  <p>The full version of <code>Container</code> is below. An excerpt from <code>Day</code> is below, and has a ref from <code>react-dnd</code>'s <code>useDrop</code>. </p>
  
  <pre class="lang-js prettyprint-override"><code>export const Container: FunctionComponent&lt;Props&gt; = () =&gt; {
    let events = useContext(State.StateContext)
    //let events: Array&lt;Event.Event&gt; = [] &lt;- with this, no warning
  
    const getDaysEvents = (day: Event.Time, events: Array&lt;Event.Event&gt;) =&gt; {
      return events.map(e =&gt; {
        const isTodays = e.startTime.hasSame(day, "day")
        return isTodays &amp;&amp; Event.Event({ dayHeight, event: e })
      })
    }
  
    let days = []
    for (let i = 0; i &lt; 7; i++) {
      const day = DateTime.today().plus({ days: i })
      days.push(
        &lt;Day key={day.toISO()} height={dayHeight} date={day}&gt;
          {getDaysEvents(day, events)}
        &lt;/Day&gt;
      )
    }
    return &lt;div className="Container"&gt;{days}&lt;/div&gt;
  }
  </code></pre>
  
  <p>An excerpt from <code>Day</code> (<code>Event</code> similarly uses a <code>useDrag</code> hook, also called at the top level just like here).</p>
  
  <pre class="lang-js prettyprint-override"><code>const Day: FunctionComponent&lt;DayProps&gt; = ({ date, height, children }) =&gt; {
    const dispatch = useContext(State.DispatchContext)
    const [{ isOver, offset }, dropRef] = useDrop({
      // …uses the dispatch function within…
      // …
    })
    // …
  }
  </code></pre>