title: Can you early return with React hooks?
body: <p>The React docs make it clear that <a href="https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level" rel="noreferrer">calling hooks conditionally will not work</a>. <a href="https://youtu.be/dpw9EHDh2bM?t=1938" rel="noreferrer">From the original React hooks presentation</a>, the reason is because React uses the order you call hooks to inject the correct value.</p>
  
  <p>I understand this, but now my question is whether or not it's okay to early return from within a function component with hooks.</p>
  
  <p>So is something like this allowed?:</p>
  
  <pre><code>import React from 'react';
  import { useRouteMatch, Redirect } from 'react-router';
  import { useSelector } from 'react-redux';
  
  export default function Component() {
    const { match } = useRouteMatch({ path: '/:some/:thing' });
    if (!match) return &lt;Redirect to="/" /&gt;;
  
    const { some, thing } = match.params;
    const state = useSelector(stateSelector(some, thing));
  
    return &lt;Blah {...state} /&gt;;
  }
  </code></pre>
  
  <p>Technically, the <code>useSelector</code> hook is being called conditionally, however the order when they are called doesn't change between renders (even though it's possible that one less hook will be called).</p>
  
  <p>If this isn't allowed can you explain <em>why</em> it isn't allowed and provide general alternative approaches to early returning in a function component with hooks?</p>