I am getting warning [ Cannot update a ponent (BrowserRouter) while rendering a different ponent (FormSocialIcon).] while login.How to solve this warning?

FormSocialIcon ponent

const FormSocialIcon = () => {
const [signInWithGoogle, user, loading, error] = useSignInWithGoogle(auth);

const navigate = useNavigate();
let location = useLocation();

let from = location.state?.from?.pathname || "/";

let errorMessage;
if (error) {
    errorMessage =
        <div>
            <p className='text-red-500 font-bold'>Error: {error.message}</p>
        </div>
}
if (loading) {
    return <Loader></Loader>
}

if (user) {
    navigate(from, { replace: true });
}

return (
    <div>
        <div className='flex justify-center items-center mt-3'>
            <div className='bg-indigo-600 w-60 h-0.5'></div>
            <div className='mx-2 font-semibold'>Or</div>
            <div className='bg-indigo-600 w-60 h-0.5'></div>
        </div>
        <div>
            {errorMessage}
            <button onClick={() => signInWithGoogle()} className='w-full md:w-96 flex justify-center mt-5 mx-auto p-2 border-2 border-indigo-500 rounded font-semibold outline-none hover:font-bold hover:transition-all hover:scale-110'>Continue with google<img className='w-5 ml-2' src={googleIcon} alt="" /></button>
        </div>
    </div>
);

};

I am getting warning [ Cannot update a ponent (BrowserRouter) while rendering a different ponent (FormSocialIcon).] while login.How to solve this warning?

FormSocialIcon ponent

const FormSocialIcon = () => {
const [signInWithGoogle, user, loading, error] = useSignInWithGoogle(auth);

const navigate = useNavigate();
let location = useLocation();

let from = location.state?.from?.pathname || "/";

let errorMessage;
if (error) {
    errorMessage =
        <div>
            <p className='text-red-500 font-bold'>Error: {error.message}</p>
        </div>
}
if (loading) {
    return <Loader></Loader>
}

if (user) {
    navigate(from, { replace: true });
}

return (
    <div>
        <div className='flex justify-center items-center mt-3'>
            <div className='bg-indigo-600 w-60 h-0.5'></div>
            <div className='mx-2 font-semibold'>Or</div>
            <div className='bg-indigo-600 w-60 h-0.5'></div>
        </div>
        <div>
            {errorMessage}
            <button onClick={() => signInWithGoogle()} className='w-full md:w-96 flex justify-center mt-5 mx-auto p-2 border-2 border-indigo-500 rounded font-semibold outline-none hover:font-bold hover:transition-all hover:scale-110'>Continue with google<img className='w-5 ml-2' src={googleIcon} alt="" /></button>
        </div>
    </div>
);

};

• javascript
• node.js
• reactjs
• firebase
• react-router

• Does this answer your question? Cannot update a ponent (`BrowserRouter`) while rendering a different ponent (`Login`) – Trenton McKinney Commented Aug 25, 2022 at 20:41

2 Answers 2

So I had been struggling with the same issue and I think it would work using the 'useEffect()' hook. It would end up looking something like this.

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

There are probably better ways of doing this, but this worked for me.

In my opinion a better solution to avoid this kind of problem and to be sure you will not try to render the last part of your code, is to use the Navigate ponent

import { Navigate } from "react-router-dom";

if (user) {
 return <Navigate to={from} replace={true}>
}