Render methods should be a pure function of props and state

Question

I am receiving the error of Warning: Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state..

It appears that it is because of this code

const LoginAuth = () => {
  navigate(routes.INDEX);
  return null;
};

removing navigate(routes.INDEX); stops the error.

What is wrong with the code? Should I be using another method to redirect an authUser? Any help is appreciated.

It is a part of

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 = () => {
  navigate(routes.INDEX);
  return null;
};

const LoginPage = () => (
  <Layout>
    <Transition>
      <AuthUserContext.Consumer>
        {authUser => (authUser ? <LoginAuth /> : <LoginNonAuth />)}
      </AuthUserContext.Consumer>
    </Transition>
  </Layout>
);

const LoginNonAuth = () => <LoginForm />;

export default withAuthentication(LoginPage);

Answer 1

Stateless functional components are expected to be pure functions, i.e. contain no side effects, while navigate() provides side effects.

Side effects are supposed to be applied after the component is mounted, that's the purpose of componentDidMount hook.

It should be:

class LoginAuth extends Component {
  componentDidMount() {
    navigate(routes.INDEX);
  }

  render() {
    return null;
  }
}

With the introduction of stateful functional components, side effects belong to useEffect hook:

const LoginAuth = () => {
  useEffect(() => {
    navigate(routes.INDEX);
  }, []);

  return null;
};