Render methods should be a pure function of props and state

user_8450582 0
Viewed 25419

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);
reactjs javascript
1 Answers

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;
};
user_37315010
Related