Intive Blog

Formik Helps us to Stay Sane

How many of you create forms on a regular basis? And how many of you hate them?

With this question I started our most recent meetup. At intive we continue to sponsor, organize and participate in various meetups, and this time, we talked about Formik, a library of components developed for React.

How to Stay Sane Building Forms with Formik

Every webpage has at least one input, right? How can it be that a requirement that’s so common can be so complex at the same time? If we do a search in Stack Overflow on how to validate an e-mail, we would get this:

The job of this awful creation is to validate whether an e-mail address is actually that, an e-mail address. We’re constantly iterating on the same code and the increasing number of boilerplates (code blocks that repeat the same information over and over) we need is overwhelming.

Let’s look at this example:

Every time, we have to add a handleChange function in order to handle the change of state in the form. In that way, React can know the input’s real value.

And we get more boilerplate:

Each time we want to create a form we need to create a handleSubmit function to be able to handle the required actions and execute submit in the form. We can perform different actions, for example: submit a request, create one asynchronous event, make validations, etc. It seems that if we want to create a form, we need to do all this, which is quite inefficient.

And we haven’t even mentioned validations. How many lines of validations do we have to write? We get a lot of nested if clauses.

Formik is Here to Save Us

Formik is a library created by Jared Palmer which basically offers two options:

First Option: Render Props

Render Props is a render pattern for components,

It provides a set of tools that allow to handle changes, add validations of different kinds, execute them, verify the handleBlur function (that is, to control whether the element was touched or not), etc. In short, it makes our life easier because someone has already dealt with all those things before and managed to work them out.

Let’s look at an example of Render Props:

Second Option: Higher Order Components (HOC)

Newer versions of HOC include Hooks, and who doesn’t like Hooks? HOC works based on React’s new technology. Let’s look at an example:

Both with Render Props and HOC we get the same pool of tools. It’s up to each one to decide which path to follow. As for validations, we can use Yup Validation, a npm library which validates schemas. It helps us to avoid repeating code, for example, when validating e-mails or when a certain field is required. This makes the code more readable, always, of course, within a validation schema.

To summarize, we have these two options (Render Props or HOC) and Yup Validation in case there are extra validations to make. In addition, we have Custom Components.

What for? When we start working with forms, we need to add onClick, onChange or onBlur functions. For this, Formik provides a component. We just have to state the name, and the tool associates it with the form’s data —that’s it. We don’t have to manually add onChange, onBlur or anything. This results in savings at the semantic level because we don’t have to write additional lines.

Not to mention the error message!

When we want to handle errors, first we have to see if the input was touched, and then, if that was the case, if it produced an error. In that case, the error should be displayed. In general, this results in a line with lots of and and nested ternaries, which blocks readability.

And then, we can have a Custom Component that is an error message.

Formik’s Pros and Cons

As always, there are pros and cons to every tool. Let’s see how Formik performs:

Pros:

  1. Formik is independent from other state handlers. Usually, professionals who work with forms and Redux must wrap forms in Redux actions, otherwise, they won’t work.
  2. It doesn’t require any previous configuration. It’s as simple as executing a npm install, import it and link it to the project’s components.
  3. Newer versions include Hooks, which makes Formik a cutting-edge tool.
  4. It includes thorough documentation, it’s easy to understand and it provides a lot of examples of different situations you might encounter.
  5. It’s recommended by React.

Cons:

  1. Formik is only useful with React and React Native.
  2. Custom Components aren’t that easy to customize.

Have you tried Formik? What’s your opinion about it?

Josmer Delgado

Josmer Delgado is React developers -former- QA (manual and automation) in intive, where he works since November 2016. He studied Engineering in Mechatronics, Robotics and Automation at Universidad Nacional Experimental Politécnica “Antonio Jose de Sucre” of Venezuela – his native country-, and he took courses in microcontrollers programming. He lives with his wife Leydis -who also works at the company as a recruiter- and with his beloved daughter Eva Sophia. Passionate chess player, also enjoys video games and football.

Add comment