title: Render methods should be a pure function of props and state
body: <p>I am receiving the error of <code>Warning: Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state.</code>. </p>
  
  <p>It appears that it is because of this code </p>
  
  <pre><code>const LoginAuth = () =&gt; {
    navigate(routes.INDEX);
    return null;
  };
  </code></pre>
  
  <p>removing <code>navigate(routes.INDEX);</code> stops the error.</p>
  
  <p><strong>What is wrong with the code? Should I be using another method to redirect an <code>authUser</code>?</strong> Any help is appreciated.</p>
  
  <p>It is a part of </p>
  
  <pre><code>import React from 'react';
  import { navigate } from 'gatsby';
  
  import AuthUserContext from './AuthUserContext';
  import withAuthentication from './withAuthentication';
  
  import Layout from './Layout';
  import LoginForm from './LoginForm';    
  import * as routes from '../../constants/routes';
  
  const LoginAuth = () =&gt; {
    navigate(routes.INDEX);
    return null;
  };
  
  const LoginPage = () =&gt; (
    &lt;Layout&gt;
      &lt;Transition&gt;
        &lt;AuthUserContext.Consumer&gt;
          {authUser =&gt; (authUser ? &lt;LoginAuth /&gt; : &lt;LoginNonAuth /&gt;)}
        &lt;/AuthUserContext.Consumer&gt;
      &lt;/Transition&gt;
    &lt;/Layout&gt;
  );
  
  const LoginNonAuth = () =&gt; &lt;LoginForm /&gt;;
  
  export default withAuthentication(LoginPage);
  </code></pre>