title: Hook requires data from another hook, but getting Error: Rendered more hooks than during the previous render
body: <p>I'm getting Error:</p>
  <blockquote>
  <p>Rendered more hooks than during the previous render.</p>
  </blockquote>
  <p>I found some answers saying I should put all hook calls on the top.</p>
  <p>However, in the following code, <code>session</code> prints <code>undefined</code> 3 times while it's loading until it prints the <code>session</code> object the fourth time.</p>
  <p>Hence, I added a check for the <code>loading</code> state.</p>
  <pre class="lang-js prettyprint-override"><code>import { signIn, signOut, useSession } from &quot;next-auth/client&quot;;
  import { request } from &quot;graphql-request&quot;;
  import useSWR from &quot;swr&quot;;
  
  export default function Profile() {
    const [session, loading] = useSession();
  
    if (loading) {
      return &lt;p className=&quot;&quot;&gt;loading...&lt;/p&gt;;
    }
    if (!session) {
      signIn();
    }
  
    const { data: user } = useSWR([USER_QUERY, session.email], (query, email) =&gt;
      request(&quot;/api/graphql&quot;, query, { email })
    );
  
    return (
      &lt;div className=&quot;&quot;&gt;
        &lt;p className=&quot;&quot;&gt;{session.user.nickname}&lt;/p&gt;
        &lt;button onClick={() =&gt; signOut()}&gt;Sign out&lt;/button&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>However, this is throwing an error.</p>
  <p>A workaround for this particular issue is to define a <code>NextAuth</code> callback for <code>session</code>, but I don't think that's the correct way to fix it, since I definitely will need to make other hook calls based on the value in the <code>session</code> object in the future.</p>
  <p>How can I fix this?</p>