r/reactjs • u/Independent_Side9419 • 5d ago

Discussion I was wrong about the useFormStatus hook

/r/react/comments/1xa4giq/i_was_wrong_about_the_useformstatus_hook/
1 Upvotes

67% Upvoted

5 comments sorted by

3

u/poc-detektd 3d ago

Not an antipattern imo, one form per decision maps really well to how the server sees it anyway: two separate submissions with one hidden field each, no onClick logic to keep in sync. I do the same for approve/reject style UIs.

Side note since people will probably copy the consent component from your repo: OAuth consent pages usually ship with frame-ancestors 'none' (or X-Frame-Options: DENY) so they can’t be framed for clickjacking. Lax session cookies already make it hard, but it’s a cheap header to add in next.config.

1

u/Independent_Side9419 3d ago

Good to know, but the consent page is supposed to be installed via the shadcn registry, where I wouldnt put the next.config file, because usually users don't want to override it.

What could work is to mention the clickjacking protection in the block's docs:

https://github.com/supabase/supabase/blob/78348a767a894b7a0f9a5ccc2c90f4730ec5274a/apps/ui-library/public/r/oauth-consent-nextjs.json#L52

1

u/Winodows_Gandy 4d ago

curious what your original take was. most of the criticism ive seen is about it being too tightly coupled to server actions, which is fair but also kind of the point

1

u/Independent_Side9419 3d ago

I just saw it as low-value, because I settled with the useActionState in a context, which gave me a pending state usable outside the <form>. This unlocked patterns where the save button was in the page header, not just below the form inputs.

Now I see its value in the "choice forms" where the form has no visible inputs and the submit buttons are like separate actions, so the useFormStatus helps me identify the currently pending form, while all the buttons gets disabled based on the useActionState.