Warning: Cannot update a component while rendering a different component

Question

I use React.js and I am getting this error while navigate in protected route from SocialLogin component:

 Warning: Cannot update a component (`BrowserRouter`) while rendering a different component (`SocialLogin`). To locate the bad setState() call inside `SocialLogin`.

I went to the locations mentioned in the stack trace and removed all setstates but it's still giving me same error. How can I remove this error?

Here is my react component code:

SocialLogin.js

const SocialLogin = () => {
const navigate = useNavigate();
let location = useLocation();

let from = location.state?.from?.pathname || "/";
const [signInWithGoogle, user] = useSignInWithGoogle(auth);
const handleSocialSignIn = () => {
    signInWithGoogle();
}
if (user) {
    navigate(from, { replace: true });
}
 return (
    <div onClick={handleSocialSignIn}>
        <img src={google} alt="" />
        <span className='signin-text'>Sign-in With Google</span>
    </div>
  );
};

export default SocialLogin;

Mircea Matei · Accepted Answer · 2022-05-16 08:58:09Z

2

Try this:

  useEffect(() => {
    if (user) {
      navigate(from, { replace: true });
    }
  }, [user]);

answered May 16, 2022 at 8:58

Mircea Matei

2902 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Atiqur Rahman Over a year ago

This work properly and remove the error .But after Sign in it takes the user in home page . How can I take the user in protected route?

Mircea Matei Over a year ago

Update the navigate function to send the user to the route you want.

Collectives™ on Stack Overflow

Warning: Cannot update a component while rendering a different component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related