Why I Like Formik

If you've ever tried building a form yourself, you'll know that after adding a few fields, some validation, error messages, and triggering things onBblur and onHover you'll know how messy the code can get. A lot of the issues come down to boilerplate code. Code that isn't necessarily complex but will inevitably contribute to cognitive load.

Intuitive

Using Formik feels like using basic React, if you wanted to you could use the handleChange, handleBlur, and handleSubmit event handlers that Formik exposes. In this scenario, Formik acts as a small abstraction to create the state hooks and handlers. This bare-bones vanilla React style of programming gives you the ability to extend to any component. Using handleChange and setValues Formik provides, I have created a category picker made up of checkboxes that limited choices to a maximum of three without needing to worry about managing the state.

Custom components

There are two options to create custom components. The first option is to provide the custom component to the Formik Field or two, wrap the whole field in a new component. The first option is good when you want a basic input field. You can also switch between inbuilt components/elements like div or span. The second option allows you to create more interesting fields. These fields can wrap not only the input field but also the label and the error field.

During my use so far, I have not been able to get the Typescript types to work. They all end up being of type any because of the FieldAttributes

type SelectFieldProps = FieldAttributes<any> & {
  label: string;
  required: boolean;
  options: OptionType;
  hideErrorMessage: boolean;
};

Easy to try

Formik handles state in a locally. This makes it easy to try Formik out for a single form in the codebase without any downsides. It's simple to set up and doesn't require a global store like redux-forms. One of the great things about Formik is that there are many articles and questions online for most of the things I've needed to do. It's an actively managed project that is being used by a lot of reputable tech companies. The creator, Jared Palmer, is an active member of the React community and the project has a good history of keeping up with the times. When React context was released, Formik 2.0 added support with almost zero breaking changes.