ok first u dont need "use client" in your clientValidation function

cause ur Login.tsx is already client only

u cant just trigger a server action in a client component without constructing a form submission first

either u handle your form submission trough a seperate submit button utilizing useFormStatus() for a loading state, or u programmatically invoke it trough a FormData constructor and use useTransition for a loading state

i do have constructed a form submission though, right? @gin here's my login.tsx

const [pending, startTransition] = useTransition();

    const [state, action] = useFormState(login, {
        success: false,
        message: '',
        code: 0,
    });

    async function clientValidation() {

        const formData = new FormData();
        
        // this is the formData u want to send to your login function
        formData.append('key', 'value');

        startTransition(() => {
            action(login);
        });

    }

i have made a small example for you

i cant really read that

ah its too big of a image, if you open it in a browser and zoom it should be readable, apologies for the inconvenience!

i appreciate this though, I've never used useFormState will look into this more

a decent thing to do is taking a look at this https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations

tho i must say it is not that well documented

but will get u started

okay, I'll check that.. I do have a form constructed here I believe though with useFormStatus.. any ideas on where I'm going wrong here? Or do you suggest I just move to useFormState

@gin

yes this looks correct

useFormStatus is for the pending value only

useFormState is for your actual form action

so u can trigger it and get the return values

yeah exactly, I dunno why it's still refreshing then

i appreciate the help though

it has nothing to do with that

i guess ill just change it to useFormState as its the better way

not change it, u have to use it

on the client it works that way

u get a bunch of weird issues if not

@gin

I tried a bunch of things including useFormState. The reason useFormState isnt optimal for my case is because I want to show the toaster and change the state based on the response. If I try to do it at the component level, with a if condition, it will re-check and run on every re-render.. which won't make sense

Got me to dig deeper into why this is happening, it turns out the issue is with a certain procedure happening in the server action

if I return a success message right away, it works fine

It's the supabase call where it refreshes for some reason, so I'll look further into that

Appreciate you helping again! Just thought I'd share where the issue stemmed from for information

alr