DEV Community: PranavB6

Performance Testing Fastify App Builds & Database Connections

PranavB6 — Wed, 25 Feb 2026 17:43:33 +0000

TLDR;

One-line takeaways

Supabase vs Local: ~57× slower per request (adds ~61 ms).
New DB connection each test (Supabase): ~6.6× slower than reusing (adds ~448 ms).
Build+close app each test: adds about ~19 ms per test (Supabase) and ~16–17 ms per test (local).

It all started with one question: When I'm testing my Fastify app, doesn't it cost a lot of performance to build() and close() the app for every test? Especially since I am opening a sql connection every time it builds.

So with the help I wrote a test (with the help of AI):

describe("Fastify app lifecycle perf", () => {
    it("A) build+close per test", async () => {
        const t0 = nowMs();
        for (let i = 0; i < 10; i++) {
            const app = await buildTestApp();
            const res = await app.inject({
                method: "GET",
                url: "/readyz",
            });

            expect(res.statusCode).toBe(200);

            await app.close();
        }
        const t1 = nowMs();

        console.log("A) build+close per test:", (t1 - t0).toFixed(1), "ms");
        expect(true).toBe(true);
    });

    it("B) build once, reuse", async () => {
        const app = await buildTestApp();
        const t0 = nowMs();
        for (let i = 0; i < 10; i++) {
            const res = await app.inject({
                method: "GET",
                url: "/readyz",
            });

            expect(res.statusCode).toBe(200);
        }
        const t1 = nowMs();

        console.log("B) build once, reuse:", (t1 - t0).toFixed(1), "ms");
        await app.close();
        expect(true).toBe(true);
    });
});

Here were the results:

GET /readyz (sql: SELECT 1 as ok)
10x
A) build+close per test: 825.4 ms
B) build once, reuse: 13.0 ms

After that I decided to test its speed when connecting to a real remote database (Supabase in this case) as well as comparing when creating a new connection each time I build vs reusing connections. Here is the culmination of all the results:

Results

When connecting to Supabase

GET /readyz (sql: SELECT 1 as ok)
10x
A) build+close per test: 5122.7 ms
B) build once, reuse: 938.0 ms

GET /readyz (sql: SELECT 1 as ok)
100x
A) build+close per test: 8082.5 ms
B) build once, reuse: 6308.7 ms

POST /api/tickets (creating a ticket)
100x
A) build+close per test: 52949.5 ms
B) build once, reuse: 6582.6 ms

POST /api/tickets (creating a ticket)
100x
REUSING CONNECTION
A) build+close per test: 8068.1 ms
B) build once, reuse: 6192.9 ms

When connecting to local database (container)

GET /readyz (sql: SELECT 1 as ok)
10x
A) build+close per test: 825.4 ms
B) build once, reuse: 13.0 ms


GET /readyz (sql: SELECT 1 as ok)
100x
A) build+close per test: 1486.6 ms
B) build once, reuse: 41.5 ms

POST /api/tickets (creating a ticket)
100x
A) build+close per test: 2586.9 ms
B) build once, reuse: 117.0 ms

POST /api/tickets (creating a ticket)
100x
REUSING CONNECTION
A) build+close per test: 1768.0 ms
B) build once, reuse: 108.2 ms

Understanding the Results

Baseline per-request times (POST /api/tickets)

Local (best case)

Reuse app + reuse connection (B): ~1.08 ms/request

Supabase (best case)

Reuse app + reuse connection (B): ~61.9 ms/request

✅ Supabase vs Local adds: 61.9 / 1.08 ≈ ~57× slower per request (about +60.8 ms each)

Reusing connection vs creating a new one each time

We compare A build+close (where connection churn matters most):

Supabase

New connection each time (A): ~529 ms/request
Reuse connection (A): ~80.7 ms/request

✅ New connection vs reused adds: 529 / 80.7 ≈ ~6.6× slower (about +448 ms each)

Local

New connection each time (A): ~25.9 ms/request
Reuse connection (A): ~17.7 ms/request

✅ New connection vs reused adds: 25.9 / 17.7 ≈ ~1.46× slower (about +8.2 ms each)

Building/closing app each time vs building once and reusing

Compare A vs B with reused connection (so you’re measuring mostly app lifecycle overhead):

Supabase (reusing connection)

Build+close each request (A): ~80.7 ms/request
Build once, reuse (B): ~61.9 ms/request

✅ Build+close vs reuse adds: 80.7 / 61.9 ≈ ~1.30× slower (about +18.8 ms each)

Local (reusing connection)

Build+close each request (A): ~17.7 ms/request
Build once, reuse (B): ~1.08 ms/request

✅ Build+close vs reuse adds: 17.7 / 1.08 ≈ ~16.4× slower (about +16.6 ms each)

(That “16×” looks huge because local B is insanely fast; the absolute cost is still ~16–17 ms per request.)

One-line takeaways

Supabase vs Local: ~57× slower per request (adds ~61 ms).
New DB connection each test (Supabase): ~6.6× slower than reusing (adds ~448 ms).
Build+close app each test: adds about ~19 ms per test (Supabase) and ~16–17 ms per test (local).

Full Example

import { buildApp } from "../../src/app.js";

async function buildTestApp() {
    const app = buildApp({
        logger: false,
    });

    await app.ready();

    return app;
}


function nowMs() {
    const [s, ns] = process.hrtime();
    return s * 1000 + ns / 1e6;
}

describe("Fastify app lifecycle perf", () => {
    it("A) build+close per test", async () => {
        const t0 = nowMs();
        for (let i = 0; i < 100; i++) {
            const app = await buildTestApp();
            const res = await app.inject({
                method: "POST",
                url: "/api/tickets",
                body: {
                    title: "Test ticket",
                    description: "Test description",
                    priority: 3,
                }
            });

            expect(res.statusCode).toBe(201);

            await app.close();
        }
        const t1 = nowMs();

        console.log("A) build+close per test:", (t1 - t0).toFixed(1), "ms");
        expect(true).toBe(true);
    });

    it("B) build once, reuse", async () => {
        const app = await buildTestApp();
        const t0 = nowMs();
        for (let i = 0; i < 100; i++) {
            const res = await app.inject({
                method: "POST",
                url: "/api/tickets",
                body: {
                    title: "Test ticket",
                    description: "Test description",
                    priority: 3,
                }
            });

            expect(res.statusCode).toBe(201);
        }
        const t1 = nowMs();

        console.log("B) build once, reuse:", (t1 - t0).toFixed(1), "ms");
        await app.close();
        expect(true).toBe(true);
    });
});

How to dynamically render forms from a schema using React, Typescript and React Hook Form

PranavB6 — Sat, 04 Mar 2023 21:15:02 +0000

Github for this tutorial: https://github.com/PranavB6/tutorials

Created with:

const formSchema: FieldAttributes[] = [
  {
    name: "fullName",
    label: "Full Name",
    type: FieldType.TEXT,
  },
  {
    name: "favAnimal",
    label: "What is Your Favourite Pet?",
    type: FieldType.SELECT,
    options: [
      { label: "Dog 🐶", value: "dog" },
      { label: "Cat 😺", value: "cat" },
      { label: "Bird 🐦", value: "bird" },
      { label: "Fish 🐟", value: "fish" },
      { label: "Tasmanian Devil 😈", value: "devil" },
    ],
  },
  {
    name: "agreeToTerms",
    label: "I Agree to all Terms and Conditions",
    type: FieldType.CHECKBOX,
  },
];

The Problem: We wanted to create simple forms that could be easily modified by team members who are not developers. We also wanted to be able to easily add new forms to our application. We decided to use a YAML schema to define the form fields and their properties. We also wanted to use React Hook Form to handle the form state and validation.

When I was first tasked with this problem, I of course googled it to find a tutorial. However, although there are many tutorials on how to render forms from a schema using React, I could not find any that used Typescript and React Hook Form. After spending (wayyy too much) time experimenting I came up with a good approach. So I decided to write this tutorial to share my learnings and to help others who are in the same situation as I was.

🚀 High Level Solution: Get the schema from the server, loop through all the fields and render a "Field" component which will render a InputField Component or a SelectField Component or a Checkbox Component etc depending on the field "type". Use React Hook Form to handle the form state and validation. Use React Context (via React Hook Form's FormProvider Component) to manage the entire form state.

Setup Basic Form

If you want to follow along, please have a look at the appendix at the end of this tutorial to see how to setup a basic React Typescript project with TailwindCSS.

Create a basic form

// src/App.tsx
import React from 'react';
import './App.css';

function App() {
  return (
    <main className="main">
      <h1>Very Important Form</h1>
      <form className="form">
        <div>
          <label htmlFor="fullName">Full Name</label>
          <input name="fullName" id="fullName" type="text" />
        </div>
        <div>
          <label htmlFor="favAnimal">What is Your Favourite Pet?</label>
          <select name="favAnimal" id="favAnimal">
            <option value="dog">Dog 🐶</option>
            <option value="cat">Cat 😺</option>
            <option value="bird">Bird 🐦</option>
            <option value="fish">Fish 🐟</option>
            <option value="devil">Tasmanian Devil 😈</option>
          </select>
        </div>
        <div>
          <input type="checkbox" name="agreeToTerms" id="agreeToTerms" />
          <label htmlFor="agreeToTerms">
            I Agree to all Terms and Conditions
          </label>
        </div>
        <button type="submit">Submit</button>
      </form>
    </main>
  );
}

export default App;

Setup React Hook Form to manage form state

import React, { useState } from "react";
import { useForm, FormProvider } from "react-hook-form";
import "./App.css";

function App() {
  const methods = useForm();

  const onSubmitHandler = (values: any) => {
    console.log(`Submitted`);
    console.log(values);
  };

  return (
    <main className="main">
      <h1>Very Important Form</h1>

      {/* setup form provider, so that we can use useFormContext in the input field component */}
      <FormProvider {...methods}>
        <form className="form" onSubmit={methods.handleSubmit(onSubmitHandler)}>
          <div>
            <label htmlFor="fullName">Full Name</label>
            <input
              {...methods.register("fullName")}
              id="fullName"
              type="text"
            />
          </div>
          <div>
            <label htmlFor="favAnimal">What is Your Favourite Pet?</label>
            <select {...methods.register("favAnimal")} id="favAnimal">
              <option value="dog">Dog 🐶</option>
              <option value="cat">Cat 😺</option>
              <option value="bird">Bird 🐦</option>
              <option value="fish">Fish 🐟</option>
              <option value="devil">Tasmanian Devil 😈</option>
            </select>
          </div>
          <div>
            <input
              {...methods.register("agreeToTerms")}
              type="checkbox"
              id="agreeToTerms"
            />
            <label htmlFor="agreeToTerms">
              I Agree to all Terms and Conditions
            </label>
          </div>
          <button type="submit">Submit</button>
        </form>

        {/* display the values of the form on the page */}
        <section>
          <pre>{JSON.stringify(methods.watch(), null, 2)}</pre>
        </section>
      </FormProvider>
    </main>
  );
}

export default App;

Create InputField and SelectField Components

Extract a text input field into a separate component

// src/components/Fields/InputField.tsx
import React from "react";

interface InputFieldProps {
  label: string;
  name: string;
  type: string;
}

const InputField: React.FC<InputFieldProps> = ({ label, name, type }) => {
  return (
    <div>
      <label htmlFor={name}>{label}</label>
      <input name={name} id={name} type={type} />
    </div>
  );
};

export default InputField;

use the useFormContext hook to manage the form state of our new InputField component

// src/components/Fields/InputField.tsx
++ import { useFormContext } from "react-hook-form";

...
const InputField: React.FC<InputFieldProps> = (...) => {
++  const { register } = useFormContext();

  return (
      ...
++      <input {...register(name)} id={name} type={type} />
      ...
  );
};

...

Replace the first input in App.tsx with our new InputField component

// src/App.tsx
++ import InputField from "./Fields/InputField";

function App() {
  return (
    ...
      <form>
        ...
++        <InputField label="Full Name" name="fullName" type="text" />
        ...
      </form>
    ...
  );
}

Extract a select field into a separate component and manage the form state with useFormContext

// src/components/SelectField.tsx
import React from "react";

import { useFormContext } from "react-hook-form";

interface SelectFieldProps {
  label: string;
  name: string;
  options: { label: string; value: string }[];
}

const SelectField: React.FC<SelectFieldProps> = ({ label, name, options }) => {
  const { register } = useFormContext();

  return (
    <div>
      <label htmlFor={name}>{label}</label>
      <select {...register(name)} id={name}>
        {options.map((option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
    </div>
  );
};

export default SelectField;

Replace the select field in App.tsx with our new SelectField component

// src/App.tsx
++ import SelectField from "./Fields/SelectField";

function App() {
  return (
    ...
      <form>
        ...
++      <SelectField
++        label="What is Your Favourite Pet?"
++        name="favAnimal"
++        options={[
++          { label: "Dog 🐶", value: "dog" },
++          { label: "Cat 😺", value: "cat" },
++          { label: "Bird 🐦", value: "bird" },
++          { label: "Fish 🐟", value: "fish" },
++          { label: "Tasmanian Devil 😈", value: "devil" },
++        ]}
++      />
        ...
      </form>
    ...
  );
}

Create FieldAttributes Interface which InputFieldAttributes and SelectFieldAttributes will extend from

Even in this small example, we can see that both fields share the label and name attributes. We can imagine that these two properties (and probably more) will be common among all Fields, so lets extract these attributes into a separate interface and extend it in both the InputFieldProps and SelectFieldProps interfaces.


// --- BEFORE ---

// src/components/Fields/InputField.tsx
interface InputFieldProps {
  label: string;
  name: string;
  type: string;
}

// src/components/Fields/SelectField.tsx
interface SelectFieldProps {
  label: string;
  name: string;
  options: { label: string; value: string }[];
}

// --- AFTER ---

// src/models/FieldAttributes.ts
// (move all the interfaces to this file)

enum FieldType {
  TEXT = "text",
  SELECT = "select",
}

interface BaseFieldAttributes {
  label: string;
  name: string;
  type: FieldType;
}

interface InputFieldAttributes extends BaseFieldAttributes {
  type: FieldType.TEXT;
}

// IMPORTANT: By setting the type to FieldType.SELECT, we are telling TypeScript that the 'options' property is required, so now we will get errors when the 'options' property is missing! This is a great thing!
interface SelectFieldAttributes extends BaseFieldAttributes {
  type: FieldType.SELECT;
  options: { label: string; value: string }[];
}

type FieldAttributes = InputFieldAttributes | SelectFieldAttributes;

export default FieldAttributes;
export { FieldType, type InputFieldAttributes, type SelectFieldAttributes };

Now we can import these interfaces into both the InputField and SelectField components and use them to type the props.

// src/components/Fields/InputField.tsx
++ import { InputFieldAttributes } from "../../models/FieldAttributes";

++ const InputField: React.FC<InputFieldAttributes> = (...) => {
  ...
};

```typescript
// src/components/Fields/SelectField.tsx
++ import { SelectFieldAttributes } from "../../models/FieldAttributes";

++ const SelectField: React.FC<SelectFieldAttributes> = (...) => {
  ...
};
```

If you look back at App.tsx, you will see we broke some things so let's fix that.

// src/App.tsx
import { FieldType } from "./models/FieldAttributes";

function App() {
  return (
    ...
      <form>
        ...
        {/* Add type to both fields */}
        <InputField
          type={FieldType.TEXT}
          ...
        />

        <SelectField
          type={FieldType.SELECT}
          ...
        />
        ...
      </form>
    ...
  );
}

Create CheckboxField Component and use FieldAttributes Interface

Now let's practice using our new interfaces by using it to create a CheckboxField.

// src/models/FieldAttributes.ts
enum FieldType {
  ...,
  // Add new field to the enum
  CHECKBOX = "checkbox", 
}

// create interface for the props of the CheckboxField Component
interface CheckboxFieldAttributes extends BaseFieldAttributes {
  type: FieldType.CHECKBOX;
}

// add the new interface to the union type
type FieldAttributes = ... | CheckboxFieldAttributes; 

// export the new interface
export { ..., type CheckboxFieldAttributes };

Now we can create the CheckboxField component.

import React from "react";
import { useFormContext } from "react-hook-form";
import { CheckboxFieldAttributes } from "../../models/FieldAttributes";

const CheckboxField: React.FC<CheckboxFieldAttributes> = ({
  label,
  name,
  type,
}) => {
  const { register } = useFormContext();

  return (
    <div>
      <input {...register(name)} type="checkbox" id={name} />
      <label htmlFor={name}>{label}</label>
    </div>
  );
};

export default CheckboxField;

Now we can use the CheckboxField component in App.tsx.

// src/App.tsx
++ import CheckboxField from "./components/Fields/CheckboxField";

function App() {
  return (
    ...
      <form>
        ...
++        <CheckboxField
++          label="I Agree to all Terms and Conditions"
++          name="agreeToTerms"
++          type={FieldType.CHECKBOX}
++        />
        ...
      </form>
    ...
  );
}

Combine all Fields into a Single Field Component

We are almost done. Next lets combine all of the fields into a single Field component. This will allow us to pass in the label, name, and type as props and then render the correct field based on the type prop.

// src/components/Field.tsx
import React from "react";
import FieldAttributes, { FieldType } from "../models/FieldAttributes";
import InputField from "./Fields/InputField";
import SelectField from "./Fields/SelectField";
import CheckboxField from "./Fields/CheckboxField";

const Field: React.FC<FieldAttributes> = (props) => {
  switch (props.type) {
    case FieldType.TEXT:
      return <InputField {...props} />;
    case FieldType.SELECT:
      return <SelectField {...props} />;
    case FieldType.CHECKBOX:
      return <CheckboxField {...props} />;
    default:
      throw new Error("Invalid Field Type");
  }
};

export default Field;

Now we can use the Field component in App.tsx.

// src/App.tsx
++ import Field from "./components/Field";

function App() {
  return (
    ...
      <form>
++        <Field label="Full Name" name="fullName" type={FieldType.++TEXT} />

++        <Field
++          label="What is Your Favourite Pet?"
++          name="favAnimal"
++          type={FieldType.SELECT}
++          options={[
++            { label: "Dog 🐶", value: "dog" },
++            { label: "Cat 😺", value: "cat" },
++            { label: "Bird 🐦", value: "bird" },
++            { label: "Fish 🐟", value: "fish" },
++            { label: "Tasmanian Devil 😈", value: "devil" },
++          ]}
++        />

++        <Field
++          label="I Agree to all Terms and Conditions"
++          name="agreeToTerms"
++          type={FieldType.CHECKBOX}
++        />

        ...
      </form>
    ...
  );
}

Create a JSON Config for the Form and Dynamicly Render the Form

Now we have a single component that can render any field type. This is a lot cleaner than having to render each field type individually. Next let's create a "json config" which we will iterate through to generate the form!

// src/App.tsx
++ import Field from "./components/Field";
++ import FieldAttributes, { FieldType } from "./models/FieldAttributes";

++ const formSchema: FieldAttributes[] = [
++   {
++     name: "fullName",
++     label: "Full Name",
++     type: FieldType.TEXT,
++   },
++   {
++     name: "favAnimal",
++     label: "What is Your Favourite Pet?",
++     type: FieldType.SELECT,
++     options: [
++       { label: "Dog 🐶", value: "dog" },
++       { label: "Cat 😺", value: "cat" },
++       { label: "Bird 🐦", value: "bird" },
++       { label: "Fish 🐟", value: "fish" },
++       { label: "Tasmanian Devil 😈", value: "devil" },
++     ],
++   },
++   {
++     name: "agreeToTerms",
++     label: "I Agree to all Terms and Conditions",
++     type: FieldType.CHECKBOX,
++   },
++ ];

function App() {
  ...

  return (
    <main className="main">
      ...
        <form ...>
++          {formSchema.map((field) => (
++            <Field {...field} />
++          ))}
         ...
        </form>

      ...
    </main>
  );
}

🙋 What if the form schema from my server is different from the form schema I want to use in my React app? This is a common problem when working with forms. The solution is to create a mapping between the two schemas. This mapping will tell your React app how to render the form fields from the schema you get from the server. This mapping will also tell your React app how to handle the form state and validation. For simplicity, I will keep the server schema and the React app schema the same.

Prerequisites

Setup the project

Create a React with Typescript app using create-react-app

npx create-react-app react-hook-form-server-forms-tutorial --template typescript

Install React Hook Form, TailwindCSS (for styling) with TailwindCSS Forms and Typography plugins

cd react-hook-form-server-forms-tutorial
npm install react-hook-form tailwindcss @tailwindcss/forms @tailwindcss/typography

Setup TailwindCSS

Create a tailwind.config.js file in the root of the project
```
npx tailwindcss init
```

Add the following to the tailwind.config.js file

/** @type {import('tailwindcss').Config} */

module.exports = {
++  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
++  plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")],
};

Copy this CSS into index.css

/* src/index.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .main {
    @apply mt-10 mx-auto container w-1/3 prose;
  }

  .form {
    @apply grid grid-cols-1 gap-6;
  }

  .form label {
    @apply text-gray-700;
  }

  .form label[data-required="true"]::after {
    @apply ml-1 text-red-500;
    content: "*";
  }

  .form input[type="text"],
  .form input[type="email"],
  .form input[type="date"],
  .form select,
  .form textarea {
    @apply mt-1 block w-full rounded-md border-gray-300 shadow-sm;

    /* for focus state */
    @apply focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50;
  }

  .form input[type="checkbox"] {
    @apply mr-3 rounded border-gray-300 text-indigo-600 shadow-sm;

    /* for focus state */
    @apply focus:border-indigo-300 focus:ring focus:ring-offset-0 focus:ring-indigo-200 focus:ring-opacity-50;
  }

  .form button {
    @apply block ml-auto mt-5 bg-indigo-600 text-white px-4 py-2 rounded-md transition;

    /* for focus state */
    @apply focus:outline-none focus:bg-indigo-500 focus:border-indigo-300 focus:ring focus:ring-offset-0 focus:ring-indigo-200 focus:scale-105 active:scale-95;
  }

  .form p.error-message {
    @apply mt-2 mb-0 text-red-500;
  }
}

Simple React-Hook-Form v7 Tutorial with Typescript

PranavB6 — Sun, 18 Dec 2022 00:18:26 +0000

Here is the repo with starter code if you want to follow along: https://github.com/PranavB6/tutorials

Part 1: Basic Form

Let's get started with some basic code:

import "./App.css";

function App() {
  const onSubmitHandler = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    console.log(`Submitted`);
  };

  return (
    <main className="main prose">
      <h1>Forms</h1>

      <form onSubmit={onSubmitHandler} className="form">
        <div>
          <label htmlFor="fullName">Full Name</label>
          <input name="fullName" id="fullName" type="text" />
        </div>

        <div>
          <label htmlFor="food">Select Your Favourite Food!</label>
          <select name="food" id="food">
            <option value="" disabled>
              Please Select...
            </option>
            <option value="pizza">Pizza</option>
            <option value="burger">Burger</option>
            <option value="ice-cream">Ice Cream</option>
          </select>
        </div>

        <div>
          <input
            name="approvesTutorial"
            id="approves-tutorial"
            type="checkbox"
          />
          <label htmlFor="approves-tutorial">
            Do you approve this tutorial?
          </label>
        </div>

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

export default App;

To make the form look good, I've added some custom TailwindCSS classes so here is how it looks:

Part 2: Integrating Inputs With React-Hook-Form

Next, we are going to define an interface that represents our form:

interface UserInput {
  fullName: string;
  food: string;
  approvesTutorial: boolean;
}

Note that the keys of our interface correspond with the names of our fields

Next, let's call the useForm hook from react-hook-form

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

function App() {
  const { register } = useForm<UserInput>();
  // ...
}

By giving the useForm hook our UserInput interface, react-hook-form can understand our form better and give us typesafety with it.

The register function allows us to register an input, so let's register one of our fields:

// Before:
<input name="fullName" id="fullName" type="text" />

// After:
<input {...register("fullName")} id="fullName" type="text" />

Note that we can get rid of the name prop since the register("fullName") also provides the name prop

Now lets register all of our inputs (and select):

<div>
  <label htmlFor="fullName">Full Name</label>
  <input {...register("fullName")} id="fullName" type="text" />
</div>

<div>
  <label htmlFor="food">Select Your Favourite Food!</label>
  <select {...register("food")} id="food">
    <option value="" disabled>
      Please Select...
    </option>
    <option value="pizza">Pizza</option>
    <option value="burger">Burger</option>
    <option value="ice-cream">Ice Cream</option>
  </select>
</div>

<div>
  <input
    {...register("approvesTutorial")}
    id="approves-tutorial"
    type="checkbox"
  />
  <label htmlFor="approves-tutorial">
    Do you approve this tutorial?
  </label>
</div>

Note that the name we pass into our register function must be a key of our UserInput interface, we if try to pass in a name that's not in our UserInput interface such as register("fullName2"), typescript will complain, which is great! This is all because we pass in our interface to the useForm hook ie. useForm<UserInput>()

Part 3: Configuring the Submit Functionality

We also need to let react-hook-form handle the submit functionality. To do this, let's get the handleSubmit function from the useForm hook and pass it to the form's onSubmit prop. We can then pass in our own onSubmitHandler to the handleSubmit function. That was a mouthful so let's just show it:

function App() {
  const { register, handleSubmit } = useForm<UserInput>();

  const onSubmitHandler = (values: UserInput) => {
    console.log(`Submitted`);
    console.table(values);
  };

  return (
    {/* ... */}

      <form onSubmit={handleSubmit(onSubmitHandler)} className="form">
      {/* ... */}
      </form>
  );
}

Let's check out the console logs:

Awesome! we have a working form with react-hook-form!

Note how the onSubmitHandler takes in a values parameter of type UserInput! Because we told useForm to use our UserInput interface, it knows that the values submitted by our form will be of type UserInput!

Part 4: Adding Default Values

Next, let's setup some default values:

const defaultValues: UserInput = {
  fullName: "John Doe",
  food: "",
  approvesTutorial: true,
};

function App() {
  const { register, handleSubmit } = useForm<UserInput>({
    defaultValues,
  });

  // ...
}

We can pass in default values right into the useForm hook!
Here is a screenshot after I added in the default values:

Part 5: Error handling

Next, let's add in some error handling. react-hook-form ships with some built-in error handling which you can pass into the register function like so: register("fullName", { required: true, maxLength: 10}), but its not as powerful as libraries like yup. Luckily, react-hook-form can integrate with libraries like yup.

Let's import yup and create a validation schema for our form:

import * as yup from "yup";

const validationSchema = yup.object({
  fullName: yup.string().required("Full Name is required"),
  food: yup.string().required("Food is required"),
  approvesTutorial: yup.boolean().required("Approves Tutorial is required"),
});

To integrate our yup validationSchema with react-hook-form, we need to first import yupResolver from the @hookform/resolvers package and then call the yupResolver() function and finally pass it into the useForm hook:

import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";

// ...

const validationSchema = yup.object({
  fullName: yup.string().required("Full Name is required"),
  food: yup.string().required("Food is required"),
  approvesTutorial: yup.boolean().required("Approves Tutorial is required"),
});

function App() {

  const { register, handleSubmit } = useForm<UserInput>({
    defaultValues,
    resolver: yupResolver(validationSchema),
  });

  // ...
}

Now you can see our form doesn't submit until the validation schema is satisfied. However, we don't actually see the errors. We need to get the errors object from the formState object in the useForm hook like so:

  const {
    register,
    handleSubmit,
    formState: { errors }, // get errors
  } = useForm<UserInput>({
    defaultValues,
    resolver: yupResolver(validationSchema),
  });

We can view the error message by getting the errors[<field-name>].message like so:

{errors.fullName && (
  <p className="error-message">{errors.fullName.message}</p>
)}

Now let's add an error message to all the fields.

<div>
  <label htmlFor="fullName">Full Name</label>
  <input {...register("fullName")} id="fullName" type="text" />
  {errors.fullName && (
    <p className="error-message">{errors.fullName.message}</p>
  )}
</div>

<div>
  <label htmlFor="food">Select Your Favourite Food!</label>
  <select {...register("food")} id="food">
    <option value="" disabled>
      Please Select...
    </option>
    <option value="pizza">Pizza</option>
    <option value="burger">Burger</option>
    <option value="ice-cream">Ice Cream</option>
  </select>
  {errors.food && (
    <p className="error-message">{errors.food.message}</p>
  )}
</div>

<div>
  <input
    {...register("approvesTutorial")}
    id="approves-tutorial"
    type="checkbox"
  />
  <label htmlFor="approves-tutorial">
    Do you approve this tutorial?
  </label>
  {errors.approvesTutorial && (
    <p className="error-message">{errors.approvesTutorial.message}</p>
  )}
</div>

Note that we can only see the errors after we press the submit button. This is because the mode property of the useForm hook is set to onSubmit by default which means it will start validation on a submit event and then trigger every time a field is changed. We can change this to onTouched which will start validation the first time a user clicks out of an input (aka "onBlur") and then trigger every time a field is changed.

  const {
    register,
    handleSubmit,
    formState: { errors }, // get errors of the form
  } = useForm<UserInput>({
    defaultValues,
    resolver: yupResolver(validationSchema),
    mode: "onTouched", // default is "onSubmit"
  });

Now we can see some beautiful errors:

Because of how powerful yup is, we can even require the checkbox field to be true

const validationSchema = yup.object({
  fullName: yup
    .string()
    .required("Full Name is required")
    .max(10, "Name is too long"),
  food: yup.string().required("Food is required"),
  approvesTutorial: yup
    .boolean()
    .isTrue("You must approve of this tutorial")
    .required("Approves tutorial is required"),
});

Now we can see the following error:

Here is the full final code:

import { useForm } from "react-hook-form";
import "./App.css";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";

interface UserInput {
  fullName: string;
  food: string;
  approvesTutorial: boolean;
}

const defaultValues: UserInput = {
  fullName: "John Doe",
  food: "",
  approvesTutorial: true,
};

const validationSchema = yup.object({
  fullName: yup
    .string()
    .required("Full Name is required")
    .max(10, "Name is too long"),
  food: yup.string().required("Food is required"),
  approvesTutorial: yup
    .boolean()
    .isTrue("You must approve of this tutorial")
    .required("Approves tutorial is required"),
});

function App() {
  const {
    register,
    handleSubmit,
    formState: { errors }, // get errors of the form
  } = useForm<UserInput>({
    defaultValues,
    resolver: yupResolver(validationSchema),
    mode: "onTouched", // default is "onSubmit"
  });

  const onSubmitHandler = (values: UserInput) => {
    console.log(`Submitted`);
    console.table(values);
  };

  return (
    <main className="main prose">
      <h1>Forms</h1>

      <form onSubmit={handleSubmit(onSubmitHandler)} className="form">
        <div>
          <label htmlFor="fullName">Full Name</label>
          <input {...register("fullName")} id="fullName" type="text" />
          {errors.fullName && (
            <p className="error-message">{errors.fullName.message}</p>
          )}
        </div>

        <div>
          <label htmlFor="food">Select Your Favourite Food!</label>
          <select {...register("food")} id="food">
            <option value="" disabled>
              Please Select...
            </option>
            <option value="pizza">Pizza</option>
            <option value="burger">Burger</option>
            <option value="ice-cream">Ice Cream</option>
          </select>
          {errors.food && (
            <p className="error-message">{errors.food.message}</p>
          )}
        </div>

        <div>
          <input
            {...register("approvesTutorial")}
            id="approves-tutorial"
            type="checkbox"
          />
          <label htmlFor="approves-tutorial">
            Do you approve this tutorial?
          </label>
          {errors.approvesTutorial && (
            <p className="error-message">{errors.approvesTutorial.message}</p>
          )}
        </div>

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

export default App;

This is everything you need to know to get started using react-hook-form, I hope you enjoy using it as much as I have.

This is my first tutorial I hope you enjoyed reading and let me know if I made any mistakes or how I could improve it, I would appreciate some constructive criticism :)