[Server Actions] How to detect loading state in form parent?
Unanswered
Transvaal lion posted this in #help-forum
Transvaal lionOP
Reading the documentation I see this:
So I was thinking if anyone has figured out a way to maybe make the pending state available in a parent component wrapping the form? I was thinking maybe wrapping the component itself in a context and then use the
Use theuseFormStatushook to show a loading state when a form is submitting on the server. TheuseFormStatushook can only be used as a child of a form element using a Server Action.
So I was thinking if anyone has figured out a way to maybe make the pending state available in a parent component wrapping the form? I was thinking maybe wrapping the component itself in a context and then use the
pending state to update the context state which can be used by other components wrapped by the provider. Or is there a better way?23 Replies
Shy Albatross
if you need that state in a parent, wouldn't it just be easier to move the fetch/action t o that parent, intead of calling it direcly from the form?
Transvaal lionOP
The useFormStatus hook can only be used as a child of a form element using a Server Action.
So there is no way to call that hook from the parent component wrapping the form
Shy Albatross
I'm not talking about using that hook
Transvaal lionOP
How would you do that with Server Actions you say?
Shy Albatross
a client component, your form parent that you want to have a loading state in, can import the server action and let the form child use the action (for submit, presumably) while doing something about the loading
what you want with context is having the action in the form then sharing the state upwards via context, which is sort of upside down - let parent have the action and it's state and share the action down with children, typical React stuff really
Transvaal lionOP
I get it.. But where do you get the pending/loading state from?
Transvaal lionOP
Anyone else been looking into this? Basically this function allows me to put a loading state on the submit button - which is great - though what if I also wanted to show a modal or disable a button outside the form meanwhile the form is being submitted?
@Transvaal lion the point of useFormStatus and useFormState is to track state in RSCs
that normally cannot use React hooks
they can also be used in client components, there the point is more to properly handle transitions
but in a client component, you can also "just" call your server action and track state as usual using react primitive
the official doc is often updated
for instance useFormStatus is now better documented, and the doc states that it can only be used in a child of the form (so it has to be both a separate component, and be rendered in the form)
useFormState doesn't have this constraint
(I deplore those awful names and hope they will change before they land in prod, I can never recall which is which)
"When used with a framework that supports React Server Components, useFormState lets you make forms interactive before JavaScript has executed on the client. When used without Server Components, it is equivalent to component local state."
So to sum it up
if you need something fancy, you may want to use a client component instead
and "just" track the state, you can indeed use a context for child to parent communication
basically whatever you would have done if these hooks didn't exist in the first place