Next.js Discord

Discord Forum

Why I am getting bad state error in console?

Answered
Rex posted this in #help-forum
Open in Discord
RexOP
"use client";
import RegisterForm from "./components/RegisterForm";
import { signIn, useSession } from "next-auth/react";
import { useRouter } from "next/navigation";
const RegisterAsAPlayer = () => {
  const router = useRouter();
  const test = useSession();
  console.log("hello");
  console.log("user from the session: ", test);

  if (test?.data) {
    console.log(test.data.user);
    router.push("/register/profile");
  }
  return (
    <section>
      <div>
        <RegisterForm />
        <div className="flex flex-col gap-[106px]">
          <div className="flex items-center justify-between">
            <p className="text-center f16 fw700 lh24 text-[#13013C]">
              Register With :
            </p>
            <div className="flex gap-[15px] items-center">
              <button
                onClick={() =>
                  signIn("google", { callbackUrl: "/register/profile" })
                }
              >
                <Image
                  src="/google.svg"
                  alt="Social Icons"
                  width={24}
                  height={24}
                />
              </button>
              <button >
                <Image
                  src="/facebook.svg"
                  alt="Social Icons"
                  width={26}
                  height={26}
                />
              </button>
            </div>
          </div>
          <p className="text-center f18 fw400 lh30 text-[#828282] ">
            Already have an account?
            <Link href={"/signin"} className="text-[#13013C]">
              Sign In
            </Link>
          </p>
        </div>
      </div>
    </section>
  );
};
export default RegisterAsAPlayer;

why I am getting page.jsx:16 Warning: Cannot update a component (Router) while rendering a different component (RegisterAsAPlayer). To locate the bad setState() call insideRegisterAsAPlayer,
Answered by joulev
import { redirect } from "next/navigation";
if (test?.data) {
  console.log(test.data.user);
  redirect("/register/profile");
}
View full answer

13 Replies

@Rex js "use client"; import RegisterForm from "./components/RegisterForm"; import { signIn, useSession } from "next-auth/react"; import { useRouter } from "next/navigation"; const RegisterAsAPlayer = () => { const router = useRouter(); const test = useSession(); console.log("hello"); console.log("user from the session: ", test); if (test?.data) { console.log(test.data.user); router.push("/register/profile"); } return ( <section> <div> <RegisterForm /> <div className="flex flex-col gap-[106px]"> <div className="flex items-center justify-between"> <p className="text-center f16 fw700 lh24 text-[#13013C]"> Register With : </p> <div className="flex gap-[15px] items-center"> <button onClick={() => signIn("google", { callbackUrl: "/register/profile" }) } > <Image src="/google.svg" alt="Social Icons" width={24} height={24} /> </button> <button > <Image src="/facebook.svg" alt="Social Icons" width={26} height={26} /> </button> </div> </div> <p className="text-center f18 fw400 lh30 text-[#828282] "> Already have an account? <Link href={"/signin"} className="text-[#13013C]"> Sign In </Link> </p> </div> </div> </section> ); }; export default RegisterAsAPlayer; why I am getting `page.jsx:16 Warning: Cannot update a component (`Router`) while rendering a different component (`RegisterAsAPlayer`). To locate the bad setState() call inside `RegisterAsAPlayer`,`
try
...

  useEffect(() => {
      if (test?.data) {
        console.log(test.data.user);
        router.push("/register/profile");
      }
  }, [test])

...
RexOP
This does solves the issue but the problem is I don't want the register page to be displayed in case the session is present. As expected after the first render the useeffect logic is expected
@Ray try ts ... useEffect(() => { if (test?.data) { console.log(test.data.user); router.push("/register/profile"); } }, [test]) ...
RexOP
in client component how can I do it with the page being shown
if (!test?.data) return null
RexOP
The register form is stll displayed
@Ray if (!test?.data) return null
put this before the return
...

if (!test?.data) return null

return (
    <section>
      <div>
        <RegisterForm />
        <div className="flex flex-col gap-[106px]">
...
with next-auth I think you can do this
const {data, status} = useSession()
...

if (status !== 'authenticated') return null

return (
    <section>
      <div>
        <RegisterForm />
        <div className="flex flex-col gap-[106px]">
...
@Rex js "use client"; import RegisterForm from "./components/RegisterForm"; import { signIn, useSession } from "next-auth/react"; import { useRouter } from "next/navigation"; const RegisterAsAPlayer = () => { const router = useRouter(); const test = useSession(); console.log("hello"); console.log("user from the session: ", test); if (test?.data) { console.log(test.data.user); router.push("/register/profile"); } return ( <section> <div> <RegisterForm /> <div className="flex flex-col gap-[106px]"> <div className="flex items-center justify-between"> <p className="text-center f16 fw700 lh24 text-[#13013C]"> Register With : </p> <div className="flex gap-[15px] items-center"> <button onClick={() => signIn("google", { callbackUrl: "/register/profile" }) } > <Image src="/google.svg" alt="Social Icons" width={24} height={24} /> </button> <button > <Image src="/facebook.svg" alt="Social Icons" width={26} height={26} /> </button> </div> </div> <p className="text-center f18 fw400 lh30 text-[#828282] "> Already have an account? <Link href={"/signin"} className="text-[#13013C]"> Sign In </Link> </p> </div> </div> </section> ); }; export default RegisterAsAPlayer; why I am getting `page.jsx:16 Warning: Cannot update a component (`Router`) while rendering a different component (`RegisterAsAPlayer`). To locate the bad setState() call inside `RegisterAsAPlayer`,`
import { redirect } from "next/navigation";
if (test?.data) {
  console.log(test.data.user);
  redirect("/register/profile");
}
Answer
I thought redirect can only be used in the server components
Thansk
@Rex I thought redirect can only be used in the server components
it's a bit more nuanced than that. check here for more info: https://github.com/vercel/next.js/pull/56067; tldr redirect will work if it is caught in a React error boundary