title: React - nextjs Calling custom hook in useEffect
body: <p>I'm trying to call 'useUser' custom hook, which uses useEffect &amp; useSWR; inside useEffect of _app.tsx. But it throws,</p>
  <p><code>Invalid hook call. Hooks can only be called inside of the body of a function component.</code></p>
  <pre><code>function MyApp({ Component, pageProps }) {
      useEffect(() =&gt; {
          const params = {
            p1: &quot;someText&quot;
            m1: &quot;someText02&quot;,
          };
      
          const { mutateUser } = useUser({
            redirectTo: &quot;/test&quot;,
            redirectIfFound: true,
          });
      
          try {
            const fetchUser = async () =&gt; {
              mutateUser(
                await fetchJson(&quot;/api/login&quot;, {
                  method: &quot;POST&quot;,
                  headers: { &quot;Content-Type&quot;: &quot;application/json&quot; },
                  body: JSON.stringify(params),
                })
              );
            };
            window &amp;&amp; fetchUser();
          } catch (error) {
            console.error(&quot;An unexpected error happened:&quot;, error);
          }
        }, []);
  }
  </code></pre>
  <p>I'm not too sure why it's not working :(
  I first separated this code in to another function, first I thought that's why it didn't work. Soon I realized that, it wasn't the cause.</p>
  <p>Really appreciate if anyone could help!</p>