which level to define useForm ?

[AsuraKev]

Hi there,

I have a question regarding the usage of useForm. I used to abstract away the form into ints own component which in there defines the useForm(). However most of the time the parent page level component are also interested in the formstate. What is the best way for parent to subscribe to formstate without having the define useForm on the parent level (I think this one kind of violates single responsibility)

thanks! :)

[Sajarin-M]

To address your concern about subscribing to state inside a child component from the parent, I don't think it's ideal.
Instead, utilizing FormProvider to encapsulate the form state logic and provide it to child components as needed seems like a better approach.
This method helps maintain a cleaner separation.

[AsuraKev]

yes but imagin you have this component layout. Lets say the cancel or submit needs to be disabled depending on the dirty state or isSubmitting flag of the form.

How would you achieve this without passing a callback e.g onFormState change and in the form you do a useEffect and notify parent when formstate changes.

[Moshyfawn]

Ideally those buttons are part of the component tree where the form is initialised, since they're directly related and need to be able to access the state, just as you describe. I think this is the case where you're trying to over-optimise for methodology by sacrificing performance, because you'll have to update the parent state by providing a callback that updates the parent state, which you'll have to synchronise with the form state anyway.

[AsuraKev]

thanks for the feedback! yep i do agree that its best that they are all part of the form. There are a few cases where component on the layout level would be interested in the form state and I wasnt sure how to handle it :)

[Moshyfawn]

You can decouple the buttons header into it's own reusable component, but for both HTML semantics and the React rendering cycle it would still make sense to call useForm high enough in the parent tree to provide the value subscription to both the form and actions components.

[AsuraKev]

Much appreciated :)