Learn React Final Form in 5 minutes!

github logo ・1 min read

About Me: I've been a professional web developer for just over 10 years now. I'm currently the lead web development instructor at Better Coding Academy, and as part of what I do, I post videos on our YouTube channel at https://www.youtube.com/c/BetterCodingAcademy.

(Subscribe for awesome web development content!)

In the following video, I show you how to get started with React Final Form in 5 minutes. Hope you enjoy!

Happy coding!

twitter logo DISCUSS (5)
markdown guide
 

I just watched the whole video, and I'm just wondering … what does this component actually give you? Your example makes it seem like it's just a lot of extra wrapping in additional components. The vanilla HTML form element and inputs can already do everything you showed off, even the conversion from plaintext body parameters to JSON

 

As React Final Form is built on top of React, I wouldn't expect to be able to do something with React Final Form that I cannot do with pure React. However, the main selling point to React Final Form is its ease-of-use, and the support for many things out-of-the-box. This was just a very quick tutorial showing the most basic functionality, but a deeper look at the examples given on the site will give you an idea of what I'm talking about. :)

 

I wouldn't expect to be able to do something with React Final Form that I cannot do with pure React.

Well... that goes without saying. But what I asked about was what it gives you over the HTML form element, and I'm not invested enough in researching the component based on the demo you've given, when I'm unconvinced that it makes any aspect of building forms easier or more developer-friendly

But what I asked about was what it gives you over the HTML form element

For front-end applications, the HTML form element does not provide much other than the ability to listen to onSubmit event handlers. If you were to submit the form, then you can handle it in the back-end using something such as Node.js, Ruby, PHP, etc., but if you're using it in the front-end, the <form> tag itself doesn't do much to assist you in managing data.

Like I said above, you can track user data using React itself, with a mixture of onChange listeners and state variables; however, for more complicated use cases (e.g. validation, multiple stages, calculated values) this quickly starts to get out of hand. This is why, in the case of form data management, I prefer to use React Final Form over built-in React.

 

Honestly, formik is simpler and the hooks API is better. Also, react-final-form is just a wrapper for final-form which is not designed for react unlike the other options in the React ecosystem

Classic DEV Post from Sep 2

What do you think of minimalist UI?

Lucas Chen profile image
I turn people into web developers @Better Coding Academy. Our graduates get salaries ranging from $80k-$120k AUD. You can find me on Stack Overflow and YouTube. Let me know if you're keen to talk.