DEV Community: Joseph Maina

Crafting Forms in React: Vanilla vs. React Hook Form vs. Formik

Joseph Maina — Fri, 12 Apr 2024 18:00:00 +0000

When you are building apps using React, one day you will require user interaction by way of using forms. Be it for user signup, user login, newsletter subscription, or any other form of interaction.

Building forms in React has its own challenges. There are so many moving parts:

Form state. Forms have fields for users to type data into. How do you get values in and out of the form fields? How do you handle changes in each field?
Data validation. How do you ensure that data typed into the form fields is in the expected format?
Form submission. If you already have valid data in the form fields, how do you get it to a data store, the database or elsewhere? Once data is submitted, what happens?

And for your forms to work, as you expect them to, then all these things have to be put in check.

In this article, we shall explore how that can be done: one, by writing all the code ourselves to control the forms; and, two, by relying on external libraries to simplify building forms.

Newsletter Signup Form: An Overview

Let's wet our feet by building a newsletter signup form.

The newsletter signup form has only a few fields with simple data validation requirements.

Field	type	Required?	Data Validation
First name	text	required	max length of 20 characters
Title	select	required
Email	email	required	standard email pattern
Message	textarea	optional

The form has two input elements (text and email), one select element (title of the user) and an optional message textarea element. The required data is validated using standard HTML validation rules.

You may want look at what we shall end up with in this repo on GitHub and try the code on this sandbox.

Crafting Forms in React: the Vanilla Way

The structure of the newsletter signup form, in pure React, is standard HTML as you know it.

Easy peasy.



export default function VanillaForm() {

  return (
    <div>
      <form id="newsletter-form" action="#" method="post">
        <label htmlFor="name">Name:</label>
        <input type="text" id="name" name="name" minlength="3" maxlength="20" required />

        <label htmlFor="title">Title:</label>
        <select id="title" name="title">
          <option value="">Please choose a title</option>
          <option value="sir">Sir</option>
          <option value="madam">Madam</option>
        </select>

        <label htmlFor="email">Email:</label>
        <input type="email" id="email" name="email" pattern="/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i" required />

        <label htmlFor="message">Message:</label>
        <textarea id="message" name="message" rows="5"></textarea>

        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

Nothing fancy here. We are using the input, select and textarea form elements. Specify the type of the input field (type="text"), give the field a name (name="email") for reference and pass in validation rules.

Notice how standard HTML validation rules have been used. These rules will keep check of the data we type into the fields.

Keeping track of the form fields

To keep track of the state of each form field and, listen to changes in the fields, we can rely on React useState hook.



export default function VanillaForm() {
  // track the state of the form fields
  const [formState, setFormState] = useState({
    name: "",
    email: "",
    title: null,
    message: ""
  });

  // handle form field changes
  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormState((prevState) => ({
      ...prevState,
      [name]: value,
    }));
  };

  return (
    <form>
      {/* form elements here*/}
    </form>
  )
}

The formState object stores all our form state while the setFormState method mutates the state whenever a change happens in a field. (You may want to look at the code for the completed vanilla form in this repo on GitHub).

For a simple form like the one we are building, doing this doesn't seem like much. But, imagine working with tens or hundreds of forms in an application. Doing this manual work will quickly turn into a mess. And will give you a headache (or chest pain).

Engineers know this struggle is real. And have come up with solutions in the form of libraries that you can rely on to manage the challenges.

For the rest of this article we turn our attention to two of the most popular libraries used to create forms in React apps and see how they solve the challenge.

Crafting Forms in React: Hook It Up

The first solution to the challenge of creating forms in React apps is the React Hook Form library.

React Hook Form is one of the most popular libraries for building forms in React apps with over 39k stars on GitHub. The library has no external dependencies according to Bundle Phobia.

React Hook Form is built on top of React hooks and is designed to be used as a hook. That means there are no components for you to import to build a form. Instead, you call the custom hook (useForm) and apply methods from the hook on an normal HTML form element.

To get started, install the package in your project:



npm install react-hook-form

We are building the same newsletter signup form in the previous step but now utilizing the goodies that React Hook Form comes with.

After installing the package, import the custom hook useForm and call it inside your component.



import { useForm } from "react-hook-form"

function NewsletterSignupForm() {
  // call the `useForm` hook
  const {
    register,
    formState: { errors },
    handleSubmit,
  } = useForm({ initialValues: { name: "", email: "", message: "" } });

  return (
    <form>
      {/* HTML form elements */}
    </form>
  )
}

Notice how the useForm hook is called in the form component.

The useForm hook is called with one optional object argument and returns methods that you use to work with your form.

The object argument can have several properties including:

defaultValues: which specifies the default values for the form fields, and,
resolver: a method for validating the data we put in the form fields

The hook then gives us methods for working with the form. Here is an overview of the methods we shall use in this section:

regiter: a method for registering input fields within the form to enable React Hook Form to track their values and manage form state
formState: an object that holds the current state of the form including validation errors
handleSubmit: a method used as an event handler for form submissions

To learn more about the useForm hook please refer to the documentation.

Newsletter Signup Form Using React Hook Form

Our newsletter signup form has a name input field, email input field, a title select field and a message textarea. The generic HTML form elements are used to build the form when using React Hook Form.

To convert the previous newsletter signup form to use the React Hook Form library:

Call the register method on each form field and pass the name of the field and any validation requirements
Include an optional error message to show when the data is invalid

As example, let's turn the name input element into a React Hook Form element.

From a regular HTML text input field



// vanilla React text input field
<form>
  <label htmlFor="name">Name:</label>
  <input type="text" id="name" name="name" required />
  {/* other form elements go here */}
</form>

To a React Hook Form text input field



<form>
  <label htmlFor="name">Name:</label>
  <input {...register("name", { required: true, maxLength: 20 })} />
  {errors.name && <p>This field is required</p>}
  {errors.name?.type === "maxLength" && (
    <p>Name cannot exceed 20 characters</p>
  )}
  {/* other form elements go here */}
</form>

In this piece of code:

<input /> is a normal HTML tag as we know it. We are using it for the name text input.
register is a method given to us by the useForm hook. The method notifies React Hook Form to keep track of the name input field, watch for changes and validate the data in the field. The register method has the following arguments:
- name of the input field which should be unique within this form (for React Hook Form to identify the field)
- Validation rules (if any). In this form we are using the standard HTML validation rules. In this input element, name is required and should be 20 characters max.

If the data in the input field is not valid, React Hook Form will record the errors in the formState object. We can access the errors and notify the user to make corrections.



{errors.name?.type === "maxLength" && (
  <p>Name cannot exceed 20 characters</p>
)}

This code checks whether the name property exists in the errors object. If present, it checks whether its type matches our validation rules (a max length of 20 characters) so that we can use it to report to the user to make corrections. If the error type doesn't match, then we are happy our name is short enough 😄!

Once that is done, React Hook Form will be aware that this field should be tracked and, should only allow submission of the data (to a dabatase or wherever) if it's valid.

Submitting the Form Using React Hook Form

Talking of form submission.

React Hook Form gives us a method (handleSubmit) to handle form submission. You pass in a function to be called to submit your form and that is it.

Let's do that here.



function NewsletterSignupForm() {
  // the rest of the component
  const onSubmit = (data) => console.log(data);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* rest of the form */}
    </form>
}

We are simulating (read pretending) form submission by logging the content to the console. You pass in a function (onSubmit) to be called by handleSubmit and that is it. handleSubmit will ensure that form submission only succeeds if our form has no errors. So you can be sure that no invalid data will reach the database.

Putting it all together

It's now your turn. Try to convert the other fields from vanilla React form fields use the React Hook Form library.

I hope you are having fun doing it.

Now turn to my impelementation and compare with what you have.

Crafting Forms in React: Formik Your Way

Lastly, let's look at the other popular library known as Formik.

Formik has a slightly different approach for building forms in React apps. Unlike the React Hook Form library which gives you a custom hook for working with forms, Formik provides a set of custom React components that you use to build forms.

Formik relys on React Context to connect the form components.

More specifically, Formik provides the following components:

<Formik /> is the parent component. It uses React Context to keep track of the form's state and exposes methods used to control the form fields.
<Form /> is a wrapper for the standard HTML <form /> element. It hooks into Formik's handleSubmit, handleReset and other methods.
<Field /> defaults to an HTML <input /> element. It uses the name attribute to match an input element to Formik's state.
<ErrorMessage /> is a component that renders an error message from a form field if the field has been visited and has invalid data. For instance, if you type an ivalid email address in an email input field and then click outside the email input field, an error is registered for that field and will be shown by the <ErrorMessage /> component.

To build our earlier newsletter signup form using Formik, first install the package as a dependency in your project:

npm install formik --save

And import the components to build the form.



import { Formik, Form, Field, ErrorMessage } from "formik";

export default function NewsletterSignupForm() {
  // other form logic
  return (
    <Formik>
      {() => (
        <Form>
          <label htmlFor="name">Name:</label>
          <Field type="text" id="name" name="name" placeholder="First Last" />
          <ErrorMessage name="name" component="div" />

          {/* other form fields go here */}

          <button type="submit">
            Submit
          </button>
        </Form>
      )}
    </Formik>
  );
}

What's going on here?

Let's zoom in on this piece of code to see what's happening.

The <Formik /> component uses the render props pattern to render the other components needed to build our form. <Formik /> accepts several props that we shall look at in the next section.
Notice how the other components are passed to the parent <Formik /> component (as render props).
- The <Form /> component returns a normal HTML form element.
- By default, the <Field /> component returns an input element specified by the type prop (here, type="text" for the name field).
- Formik keeps track of errors in our form fields and you can use the <ErrorMessage /> component to show the errors to the user.

You use these components to build complex forms.

This is only the name field of the newsletter signup form. As an exercise, try adding the email field to the newsletter signup form using the Formik form components.

Tracking Form State Using Formik

A form library is only useful if it can simplify the process of keeping track of the form's state, validating the data we type into the form fields and submitting the form. Let's see how Formik does that.



const validate = (values) => {
  const errors = {};

  if (!values.name) {
    errors.name = "Name is required";
  } else if (values.name.length > 20) {
    errors.name = "Name cannot exceed 20 characters";
  }
  // other validation rules go here

  return errors;
};

const handleSubmit = (data) => console.log(data)

export default function NewsletterSignupForm() {
  return (
    <Formik
      initialValues={{ name: "", email: "", message: "" }}
      validate={validate}
      onSubmit={handleSubmit}
    >
      {() => (
        <Form>
          {/* other form fields */}
        </Form>
      )}
    </Formik>
  );
}

A lot is going on here.

First, the <Formik /> component accepts several props.

initialValues holds initial data for the form fields if any.
validate function for validating the data in the form. Here, we are using a custom validation method using the standard HTML validation rules. You may also choose to use a data validation library like Yup, Zod, Joi and others. Formik supports Yup by default.
onSubmit function that holds the logic to submit the form data (to wherever). The function will be called by Formik when all the data in the form is valid.

And that is it. That is all that is required to build a form using Formik. By relying on the custom components offered by Formik, you can build complex forms easily.

Here is the full code for the newsletter signup form built with Formik.

Which to choose

It is possible to build a working form with only React and no external libraries are required. However, if the form has several fields, it becomes hectic writing all the form logic.

The choice between React Hook Form and Formik is largely on personal preference. I prefer to use React Hook Form just because it has no external dependencies and is a bit more popular than Formik. You can also use any data validation library (unlike Formik that only supports Yup).

If you choose to go with React Hook Form, you need to remember that it only gives you a hook and methods to work with forms. It is upto to you to build form components.

On the other hand, Formik gives you components that you can mix and match to have fully working forms. Formik has builtin support for Yup for data validation.

Explore further

You need not go with the most popular choices. In the JavaScript world, there is never a shortage of alternatives!

React Final Form is another library you can try. It is built on top of Final Form but has not received updates in like forever.
If you are using Ant Design components to build your app, they have a nice solution for creating forms. Be sure to check it out.

Let me know in the comments which other solutions you have found. And what works for you.

Thank you for reading 🙏 Catch you on the next one!

Mastering React: Essential JavaScript Concepts for Web Developers

Joseph Maina — Sun, 12 Nov 2023 04:38:07 +0000

Here is the typical roadmap for a modern frontend developer:

HTML5 => CSS3 => JavaScript => JavaScript Library ...

Well, mostly, though not always.

And, there are many options when it comes to choosing a client-side JavaScript library. But there is definitely no doubt that React is a popular choice among beginners. A good choice, by the way.

The focus of this article is for those who choose to continue on the path to frontend development with React. Specifically, the amount of JavaScript you will need to master before you can write a Hello World component in React and not feel lost.

Where to begin

From personal experience, it is so much easier if you learn JavaScript and then try a library. But not take both simultaneously. It's worse when you try to do it in reverse.

How does a front-end developer decide that "well, I have learned enough JavaScript to be able to grasp React principles." When is it too early? When is it just about time to get into it?

React is a JavaScript library that makes writing web components as easy as a, b, c...Maybe.

To be able to learn React you will need to be comfortable with your JavaScript. Some of the things you will use more often:

variables: let, const
functions: regular, arrow
objects: {}
arrays and their methods: [], map()
destructuring
template literals
ternary operator
ES modules import/export
spread syntax: ...[]

If you master these JavaScript core concepts, React will not feel like magic. You will be able to understand how the thing does its thing. You will learn React much better. (Although I am not making promises about that 😜)

Let's dive into these JavaScript concepts, learn what each is, and how it relates to React.

Variables

Variables are everywhere in the world of programming. Variables are containers: to store program data and pass it around from one part of a program to another.

In Javascript, there are two ways to declare variables: using let or const.

The let keyword is used to decalare variables whose value might change at different parts of the program. You can reuse these variables as you wish.

let count = 0

count is name of the variable, whose value is 0 initially. The value of count can change, or be reassigned a different value during execution.

count = 1

On the other hand, const is used to declare constants. Constants are variables that cannot be reassigned other values. You cannot reuse these variables.

const url = "https://dev.to/"
const visitors = 12
}

A variable can be any valid JavaScript data type.

Objects and Arrays

The most common data structures you will encounter when working with React are Objects and Arrays.

An object stores key-value pairs, aka properties. The key is a string while the value of the property is any JavaScript data type, or another object.

const user = {
  name: "Joseph Maina",
  country: "Kenya"
}

Note that, even if an object variable is declared as a constant, it can be changed by adding, updating or removing its properties.

user.city = "Nairobi"

Arrays store a collection of data under a single variable name. Arrays are useful when you want a render a group of similar components in React. We shall talk about this later in this article.

Function expressions and arrow functions

Functions are processing factories in a program. Data gets into a function, processed data comes out of the function. There are two ways in which you can create functions in JavaScript: regular function expression that use the function keyword, and the arrow function where that keyword is not used.

In fact, React web components are reusable JavaScript functions that define a part of the user interface (UI). A React component receives data, aka props, processes that data, and returns what should be rendered on the UI.

Here is an example of a regular function:

function Hello(props) {
  // props is the data passed into this function

  // process the data here
  let greeting = `Hello ${props.name}` // props is an object

  // then return the results
  return <h1>{greeting}</h1>
}

Arrow functions can also be used.

const Button = () => (
  <button>Click me!</button>
)

I love arrow function components. Aren't they just beautiful!

ES modules import/export

In React, a component can be implemented in its own module, a separate jsx file somewhere in the filesystem. The component is exported from its location, then imported where it is needed.

Take a look at this hypothetical directory structure.

.
|-- pages
|   |-- about.tsx
|   |-- home.tsx
|   |-- ...
|-- components
|   |-- button.tsx
|   |-- header.tsx
|   |-- ...
|--...

The button.tsx file exports a <Button /> component.

// components/button.tsx
export default const Button = () => (
  <button>Click me!</button>
)

The component can be imported as required. For instance, the home component might use the <Button />.

// pages/home.tsx
import { Button } from "./components/button"

function Home() {
  return (
    <main>
      <h1>Home component</h1>
      <Button />
    </main>
  )
}

Ternary operator

Sometimes you want to render a component conditionally. For instance, you may want to show a <Login /> button to users who are not logged in. Otherwise, you want to show a <Logout /> button.

A ternary operator, an if...else alternative, comes in handy in such a situation.


{isLoggedIn ? <Logout /> : <Login />}

An AND (&&) operator can be used when you want to show only one component conditionally.

// JavaScript expressions are enclosed in {...}
{name && <Hello name = {name} />}

The <Hello /> component will be rendered only when name is available.

Object destructuring

Destructuring is used to unpack the properties of an object. You can use destructuring to pick the properties required by a React component.

In the <Hello /> component we saw earlier, instead of passing a generic props object, we can choose the specific properties needed by the component.

const Hello = ({ name }) => {
  let greeting = `Hello ${name}`
  return <h1>{greeting}</h1>
}

This <Hello /> component receives the name property and displays a greeting. The props passed from the calling parent component might include other properties that are not required by this component.

Array map() method

The other thing you will need to know as you prepare to begin your wonderful journey in frontend development with React is the Array.map() method.

The map() method calls a function on each element in an array and creates another array with the results.

This method is useful in React when you want to render several components that have the same structure.

A real world example would be a list of items on an e-commerce site. Each item on the list might be rendered as a card having an image of the item, a small description and the price of the item. The page may have several of these cards displayed.

The products maybe stored as an array.

const products = [
  {
    item: "mug",
    id: 1,
    description: "one liter",
    price: "5"
  },
  {
    item: "hat",
    id: 2,
    description: "adjustable strap",
    price: "15"
  },
]

And rendered on the page with the map() method.

function ProductList({ products }) {
  return (
    {products.map(product => (
      <Card product={product} />
    ))}
  )
}

What next?

That was just a brief overview of the things you need to be aware of as you advance in the journey of becoming a frontend developer.

Once you have mastered these concepts go ahead and have fun with React. Crush React and build awesome products for yourself and for your clients. Then keep going.

Let me know in the comments what other essential concepts I might have left out.