What is best way to create Forms in React ? Formik ?
Since I was working on Formik recently, I couldn’t help but write a small article on it, which (if it suits your fancy) I would want you to read.
Let’s take a step back and consider why Formik was developed in the first place before diving deeply into Formik for forms in React.
We should likely begin by examining how forms were initially constructed in React. Forms are an essential component of every online application since they allow users to interact with the site. React forms are unique in that you can either enable the browser to process and collect data via React change events, or you may manage this feature entirely with React.
However, this requires a developer to take care of everything. The amount of code required to develop even a basic form with React’s additional features like validation, error handling, form state management, etc. is substantial. Over time, the code grows to be a 400-line component with numerous useEffects, useStates, and custom logic to deal with all the edge situations. That’s pretty much the traditional way of creating forms in React.
It certainly sounds like it’ll be a challenge.
Astonishingly, though! Then a group of open-source enthusiasts and react geeks stepped in, each creating their own vision for what a library should be. This library would now be able to manage the above mentioned features and help in the development of custom input components. Hence, by letting us control their designs, behavior, and presentation of the entire form. React’s form libraries have matured to the point where they can effectively address the vast majority of our everyday issues. Some famous examples include Formik, the React-hook form, the Redux form, the React-final form, etc.
But the fundamental issue is whether or not we actually need one.
Initially, the answer may be “nah” for a small project, but it could grow to “please, please yes” later. The code organization benefits greatly from using a form library, despite the tiny package size the library often has. If forms are not constructed using such libraries, React loses its declarative nature.
In that case, what form of library do you think is the most effective?
Formik fixed many issues that its “ancestor,” Redux Form, had. After then, a library called React Hook Form became available, fixing some of the problems that had plagued Formik. This method of choice making might be the subject of its own article. Consequently, due to the breadth of the topic, I will focus solely on Formik in this post.
As the Formik documentation states, “Build forms in React, without the tears.”
An open-source React form library, Formik. The use of Formik in React forms allows for greater functionality with fewer lines of code. Jared Palmer created the Formik library due to his annoyance when working on React forms. With everything in its proper place, testing, refactoring, and reasoning about your forms should be much easier. In terms of Github popularity, it is by far the most widely used React Form library.
It also has a big community behind it, so you can always find answers to your problems, see working examples of other people’s code, or fork an existing project to use as a starting point. In order to facilitate your work with forms, Formik includes a few helper components. It also keeps track of your form’s state and exposes a few reusable methods and event handlers (handleChange, handleBlur, and handleSubmit). It really facilitates one’s development process and reduces boilerplate code by abstracting away parts of your form through components like <Field/> and <Form />. Formik’s declarative style is what makes its code legible, which is a perk for many programmers. In terms of size, it is the largest free form library, increasing the total size of your JavaScript bundle by 13.1KB. If your site is fairly huge, though, this weight is still manageable.
For this reason, Formik is your best friend if you’re searching for a declarative React form library that exposes an interface to build your own validation and business logic, while also providing a wonderful user interface (and keeping the peace).
Thanks for reading!
See you at my next article.
