Frustrated by Formik? Here's a simpler way to do forms in React

Is this you?

I've tried so many different things I've found online

Holy crap it works now, such a small problem I've lost hours to :(

All I want to do is a simple thing, this is all so unnecessarily complex

Try using react-hook-form.

React-hook-form is different, because it (mostly) keeps its state in the DOM (like classic HTML form elements).

Here's an example of a single field form in react-hook form (taken from their docs):

import React from 'react';
import { useForm } from 'react-hook-form';
const Example = () => {
const { handleSubmit, register, errors } = useForm();
const onSubmit = (values) => console.log(values);
return (
<form onSubmit={handleSubmit(onSubmit)}>
required: 'Required',
pattern: {
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
message: 'invalid email address',
{ &&}
validate: (value) => value !== 'admin' || 'Nice try!',
{errors.username && errors.username.message}
<button type="submit">Submit</button>

Compare that to your existing form code. I don't know about you, but my React forms with Formik would have twice as many lines of code to achieve the same thing.

You'll notice that it's using ref, rather than tracking state within the library. Since moving to react-hook-form, I no longer have to worry about state not syncing correctly in huge forms.

Everything just works as expected, and my code is much simpler too.

(Shameless plug for the useEffect book I wrote below)

Tired of infinite re-renders when using useEffect?

A few years ago when I worked at Atlassian, a useEffect bug I wrote took down part of Jira for roughly one hour.

Knowing thousands of customers can't work because of a bug you wrote is a terrible feeling. To save others from making the same mistakes, I wrote a single resource that answers all of your questions about useEffect, after teaching it here on my blog for the last couple of years. It's packed with examples to get you confident writing and refactoring your useEffect code.

In a single afternoon, you'll learn how to fetch data with useEffect, how to use the dependency array, even how to prevent infinite re-renders with useCallback.

Master useEffect, in a single afternoon.

useEffect By Example's book cover