Next.js Discord

Discord Forum

Can I call a function in the top level of my component ??

Unanswered
Barbary Lion posted this in #help-forum
Open in Discord
Barbary LionOP
Is this fine practice:

How does React handle functions being called like this during the render of this component, is this normal ?

P.S I'm getting build errors, after implementing this, hence the question

"use client";

import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";
import { useRouter } from "next/navigation";

export default function SignOutPage() {
const router = useRouter();
const supabase = createClientComponentClient();

const handleSignOut = async () => {
await supabase.auth.signOut();
router.refresh();
};

handleSignOut();

setTimeout(() => {
router.push("/");
}, 2000);

return (
<div className="flex items-center justify-center h-full bg-gray-900">
<div className="p-4 text-3xl text-center text-gray-100 animate-pulse">
Signing out...
</div>
</div>
);
}

2 Replies

Barbary LionOP
Emphasis on the handleSignOut(); being called when component is rendered
Barbary LionOP
It looks like useEffect is required: I modified to below (not 100% certain as I don't fully understand useEffect and the dependencies array)

"use client";

import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";
import { useRouter } from "next/navigation";
import { useEffect } from "react";

export default function SignOutPage() {
const router = useRouter();
const supabase = createClientComponentClient();

useEffect(() => {
const handleSignOut = async () => {
await supabase.auth.signOut();
router.refresh();
};

handleSignOut();

setTimeout(() => {
router.push("/");
}, 2000);
}, [router, supabase.auth]);

return (
<div className="flex items-center justify-center h-full bg-gray-900">
<div className="p-4 text-3xl text-center text-gray-100 animate-pulse">
Signing out...
</div>
</div>
);
}