A few days ago we posted a poll on our ReactEurope twitter asking people which form libraries they would use if they were to start a new project.
The results unsurprisingly reflected npm download stats with formik ahead but what npm numbers don't show is that almost as many users do not use any library at all and just rely on react hooks and lifecycle functions.
formik is the dominant one, it relies on react to manage forms while final-form can be used without it and makes use of subscriptions, it is also about half the size. Both formik and final-form users answered they were very happy with both so feel free to pick whichever, formik is bigger (14.7KB) compared to final-form (7.6KB) but formik has great support for react native and some cool features like managing low priority updates using react’s scheduler.
react-hook-form is also pretty neat, as its name indicates it was built post React hooks release and is really optimized for them and written in TypeScript, it will also make you write a little less code than the other two libraries especially for validation which is always a good thing. It also has benchmarks on its site showing it more performant than the competition though you always need to take these with a grain of salt. However, it is still new and some of its design decisions make it incompatible with a popular library such as MaterialUI (though there are workarounds being worked on).
There is also react-form which was also written with hooks in mind and support all the features you would expect from a form library including cool memoization for frequent and fast rerenders. It is also ridiculously small with just 4.5KB!
These 4 libs would be the main big ones however there are a few cool extra ones that deserve a mention:
unform which has amazing support for uncontrolled form structures.
react-jsonschema-form if you need dynamic form generation, this library will generate a form for you using json, no need to write any code.
frontier-forms also generates forms for you but based on your GraphQL mutations. That is to say, you just pass it a mutation query and it generates a form for you which is pretty cool. And because it makes use of final-form you get all the form state management and validation on top. You can watch a demo of it here from last year’s edition.
All that being said, the elephant in the room here is that close to 40% of respondents said they did not use any library and David Piano who wrote the great xstate state machine lib and sceptic of such form libraries suggested just using useReducer and useEffect instead which is similar to how it’s done in ReasonML.
If you’re not familiar with either useReducer or ReasonML, think of it as a local redux for your form, in other words, a reducer to which you can dispatch actions triggered by your form.
You can see some nice examples of using useReducer here, here and there.
However, people were quick to ask David how would we deal with the other issues that form libraries take care of such as validation, errors and more.
There doesn’t seem to be a concentius on that part for now.
Conclusion:
If you want to play it safe, go with one of the big four mentioned above, they cover more than 90% of use cases and offer a great DX. If you’re feeling a bit adventurous, you can try one of the extra ones mentioned.
If your forms get very complex, you may regret picking a library and wish you followed David’s advice by just using useReducer. However, most people are happy using these libraries even on big projects as people reported in our original twitter thread.
If you want to learn more about this topic we’re happy to say that Erik Rasmussen, the author of final-form will do a workshop that will teach you how to build modern forms in the three main ways mentioned above:
- by just using useState
- by using useReducer and useEffect
- by using a library that smooths the process of dealing with validation, errors and more.
How about you? Feel free to comment which is your prefered way. By the way, if you’re in the process of writing your own form library that you think would bring the best of both worlds (useReducer+validation etc) or even something different and you want to show it at the conference, feel free to send us a proposal on our call for paper, we’d love to read about it!
Top comments (2)
In the company I work for we had a series of meetings where we had to choose one of the top frameworks/libraries to use in our next projects(way back). We listed all the pros and cons of each one (Angular, Ext, React, Vue etc.) and one of the cons of React was exactly this one: having to think about which library to use for 'this' and 'that'.
react-hook-form