I write about various topics that I'm currently learning, be it front end, back end, cloud, DevOps, etc., you name it!
For any questions you may have, you can reach out to me at: hello@hungvu.tech.
It's NOT about avoiding the usage react-hook-form with MUI. It's more about a complexity of integration when your forms become complex (e.g., 50 fields with conditional choices) should be put into consideration.
MUI uses controlled components (e.g., TextField), which means a component has its own internal state (not controlled by the DOM). Indeed, <input> is used underneath and its properties are exposed via inputProps. The great thing about Formik is it can directly work with controlled components. Here is an example of Formik with MUI: formik.org/docs/examples/with-mate....
react-hook-form is more complicated to setup in the long run. react-hook-form by design targets as native and uncontrolled components. It has Controller to help work with external controlled components from libraries like MUI. However, ref of internal input of a component must be exposed somehow, which is not always the case (not a must, see Bill's explaination in the thread below). At that point, you will need to find a hacky way to ensure react-hook-form a single source of truth.
You may ask why don't we break down a form to have smaller chunks. The thing is, some forms have tightly-coupled sections by nature (U.S tax form for example). Breaking it down will result in other set of problems, such as global state control, and can even be more complicated.
Thanks for the feedback. React hook form maintainer here :) I would like to address some of the misconceptions and misunderstanding here.
However, ref of internal input of a component must be exposed somehow, which is not always the case.
That's simply not the case, for controlled component react hook form doesn't require users to provide ref, the only reason why we are asking for ref is for focus management. We care a lot about accessibility and especially focus on management. So by providing the input ref, we can focus on that errored input if validation fails. However, it's an optional thing to do, but we highly recommend that.
For those who are interested are what's Controller, You can watch this video: youtube.com/watch?v=N2UNk_UCVyA which I try to explain how the controller is been built.
Form libraries are generally there to solve a part of your form management, it's not going to be a full solution to solve how you structure your application and break down different parts of your forms. You will still have the responsibility to manage your application and structure them in a meaningful and maintainable way.
As we understand integration with other controlled components is always a challenge due to different component API designs, while the form library has to be as generic as possible. This is something we are constantly seeking to improve. The following codesandbox may help some of you out there (it does live in the doc under Controller).
I write about various topics that I'm currently learning, be it front end, back end, cloud, DevOps, etc., you name it!
For any questions you may have, you can reach out to me at: hello@hungvu.tech.
Thanks for correct my misunderstanding, Bill! I will adjust my comment to avoid confusion.
react-hook-form is really great when working with native and uncontrolled components thanks to its strength in performance and less verbose code. That said, it is also my preference when working with small, controlled forms too.
At least in my experience, Formik makes huge forms with controlled components maintainable right out of the gate. I have not figured out how to achieve the same experience with react-hook-form though. What I described is more of an edge case, and hopefully react-hook-form can help me handle it efficiently in the future.
Can you please provide more details why not to use react hook form with MUI as i am thinking to use these two.
Thanks
Ty for reading Saquib!
A new (improved) version of the article will be published in the future.
The new content will cover also your Q.
🚀🚀
It's NOT about avoiding the usage
react-hook-formwith MUI. It's more about a complexity of integration when your forms become complex (e.g., 50 fields with conditional choices) should be put into consideration.MUI uses controlled components (e.g.,
TextField), which means a component has its own internal state (not controlled by the DOM). Indeed,<input>is used underneath and its properties are exposed viainputProps. The great thing about Formik is it can directly work with controlled components. Here is an example of Formik with MUI: formik.org/docs/examples/with-mate....react-hook-formis more complicated to setup in the long run.react-hook-formby design targets as native and uncontrolled components. It hasControllerto help work with external controlled components from libraries like MUI.However,(not a must, see Bill's explaination in the thread below). At that point, you will need to find a hacky way to ensurerefof internalinputof a component must be exposed somehow, which is not always the casereact-hook-forma single source of truth.You may ask why don't we break down a form to have smaller chunks. The thing is, some forms have tightly-coupled sections by nature (U.S tax form for example). Breaking it down will result in other set of problems, such as global state control, and can even be more complicated.
Hope this helps!
Ty Hung for your feedback!
With all collected feedback a new improved version will be published at some point.
🚀🚀
Hi there,
Thanks for the feedback. React hook form maintainer here :) I would like to address some of the misconceptions and misunderstanding here.
That's simply not the case, for controlled component react hook form doesn't require users to provide
ref, the only reason why we are asking forrefis for focus management. We care a lot about accessibility and especially focus on management. So by providing the input ref, we can focus on that errored input if validation fails. However, it's an optional thing to do, but we highly recommend that.For those who are interested are what's Controller, You can watch this video: youtube.com/watch?v=N2UNk_UCVyA which I try to explain how the controller is been built.
Form libraries are generally there to solve a part of your form management, it's not going to be a full solution to solve how you structure your application and break down different parts of your forms. You will still have the responsibility to manage your application and structure them in a meaningful and maintainable way.
As we understand integration with other controlled components is always a challenge due to different component API designs, while the form library has to be as generic as possible. This is something we are constantly seeking to improve. The following codesandbox may help some of you out there (it does live in the doc under
Controller).codesandbox.io/s/react-hook-form-v...
Again thanks for your feedback, we (the maintainers) will try our best to make the integration a bit easier in the future.
Cheers
Bill
Hello Bill,
Really honored to respond on this thread.
All your feedback is noted for the 2nd version of this article.
Ty for your great work.
🚀🚀
Thanks for correct my misunderstanding, Bill! I will adjust my comment to avoid confusion.
react-hook-formis really great when working with native and uncontrolled components thanks to its strength in performance and less verbose code. That said, it is also my preference when working with small, controlled forms too.At least in my experience, Formik makes huge forms with controlled components maintainable right out of the gate. I have not figured out how to achieve the same experience with
react-hook-formthough. What I described is more of an edge case, and hopefullyreact-hook-formcan help me handle it efficiently in the future.Thanks again and keep up the great work 🚀
Ty for your new remarks Hung Vu.
🚀🚀