Forem: Akshay Manoj

A Simple Documentation for using React Hook Form and Zod

Akshay Manoj — Tue, 06 Aug 2024 16:44:22 +0000

Defining Types for the form

type FormFields = {
  email:string,
  password:string,
}

Constructing a Form in React

<form className="tutorial gap-2 flex max-h-screen flex-col justify-center items-center">
        <input
          type="text"
          placeholder="Email"
          className="border-2 border-slate-400 rounded-md text-black placeholder-black-50"
        />

        <input
          type="password"
          placeholder="Password"
          className="border-2 border-slate-400 rounded-md text-black placeholder-black-50"

        />
        <Button type="submit" >
         Submit
        </Button>
   </form>

Install react-hook-form

npm i react-hook-form

The Entities of React Hook Form

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

function App () {

        const {
        register, 
        handleSubmit, 
        setErrors, 
        formState: {errors, isSubmitting}
        } = useForm<FormFields>()

}

Using the register property to register values from the form

<form className="tutorial gap-2 flex max-h-screen flex-col justify-center items-center">
        <input
          type="text"
          placeholder="Email"
          className="border-2 border-slate-400 rounded-md text-black placeholder-black-50"
            {...register("email")}
        />

        <input
          type="password"
          placeholder="Password"
          className="border-2 border-slate-400 rounded-md text-black placeholder-black-50"
                    {...register("password")}
        />
        <Button type="submit" >
         Submit
        </Button>
   </form>

Using the handleSubmit to handle the form submit.

💡 We will define our custom submit function and pass that function as a parameter to handleSubmit from the onSubmit event handler inside the form

We use SubmitHandler to make TS understand that the submit function receives the form’s values and events

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

//writing the submit function
//this function mimics a submit
const onSubmit: SubmitHandler<FormFields> = async (data) =>{
        await new Promise((resolve) => setTimeout(resolve, 1000));
        console.log(data); // we will get data here once the form is submitted
}

<form onSubmit={handleSubmit(onSubmit)} className="tutorial gap-2 flex max-h-screen flex-col justify-center items-center">
        <input
          type="text"
          placeholder="Email"
          className="border-2 border-slate-400 rounded-md text-black placeholder-black-50"
            {...register("email")}
        />

        <input
          type="password"
          placeholder="Password"
          className="border-2 border-slate-400 rounded-md text-black placeholder-black-50"
                    {...register("password")}
        />
        <Button type="submit" >
         Submit
        </Button>
   </form>

Using Zod for validation and implementing errors

Installing dependencies

npm i zod
npm i @hookform/resolvers

Defining zod Scehma and inferring the schema to existing Type Definition

import {z} from 'zod';
const schema = {
        email: z.string().email(),
        password: z.string().min(8)
}

/*
below given statement basically infers the above defined schema
to the data type defined before that is
type FormFields = {
  email:string,
  password:string,
}
*/
type FormFields = z.infer<typeof schema>

Adding resolver to useForm hook to connect zod

import { zodResolver } from "@hookform/resolvers/zod";

function App () {

        const {
        register, 
        handleSubmit, 
        setErrors, 
        formState: {errors, isSubmitting}
        } = useForm<FormFields>(
        {
            resolver: zodResolver(schema)   
        }
        )

}

Intergrating the errors created by zod to the form using the errors of formState from useForm Hook

<form onSubmit={handleSubmit(onSubmit)} className="tutorial gap-2 flex max-h-screen flex-col justify-center items-center">
        <input
          type="text"
          placeholder="Email"
          className="border-2 border-slate-400 rounded-md text-black placeholder-black-50"
            {...register("email")}
        />
        {errors.email && <div className="text-red-500">{errors.email.message}</div>}

        <input
          type="password"
          placeholder="Password"
          className="border-2 border-slate-400 rounded-md text-black placeholder-black-50"
                    {...register("password")}
        />
                {errors.password && <div className="text-red-500">{errors.password.message}</div>}

        <Button type="submit" >
         Submit
        </Button>
   </form>

Setting up default values to the form using defaultValues as parameter to the useForm Hook

💡 These values will populate the form fields are provided.

import { zodResolver } from "@hookform/resolvers/zod";

function App () {

        const {
        register, 
        handleSubmit, 
        setErrors, 
        formState: {errors, isSubmitting}
        } = useForm<FormFields>(
        defaultValues:{
            email:"test@email.com"
        },
        {
            resolver: zodResolver(schema)   
        },
        )

}

Mocking an error inside the submit function and setting errors to the specific form fields

//writing the submit function
//this function mimics an Error
const onSubmit: SubmitHandler<FormFields> = async (data) =>{
        try{
            await new Promise((resolve) => setTimeout(resolve, 1000));
            throw new Error();
        }catch(error){
            setError('email',{message:"This is from a general point"})
            /*this function will give errors after clicking submit to 
            the email error message and show the messages under it*/
        }
        console.log(data); // we will get data here once the form is submitted
}

Mocking an error inside the submit function and setting errors to the root field (General Errors)

💡 adding root error set up under the form

<form onSubmit={handleSubmit(onSubmit)} className="tutorial gap-2 flex max-h-screen flex-col justify-center items-center">
        <input
          type="text"
          placeholder="Email"
          className="border-2 border-slate-400 rounded-md text-black placeholder-black-50"
            {...register("email")}
        />
        {errors.email && <div className="text-red-500">{errors.email.message}</div>}

        <input
          type="password"
          placeholder="Password"
          className="border-2 border-slate-400 rounded-md text-black placeholder-black-50"
                    {...register("password")}
        />
                {errors.password && <div className="text-red-500">{errors.password.message}</div>}

        <Button type="submit" >
         Submit
        </Button>
              {errors.root&& <div className="text-red-500">{errors.root.message}</div>}

   </form>

//writing the submit function
//this function mimics an Error
const onSubmit: SubmitHandler<FormFields> = async (data) =>{
        try{
            await new Promise((resolve) => setTimeout(resolve, 1000));
            throw new Error();
        }catch(error){
            setError('root',{message:"This is from a general point"})
            /*this function will give errors after clicking submit to 
            the root error message and show the messages under it*/
        }
        console.log(data); // we will get data here once the form is submitted
}

Using isSubmitting to showcase that the form is undergoing an async operation in the form.

<form onSubmit={handleSubmit(onSubmit)} className="tutorial gap-2 flex max-h-screen flex-col justify-center items-center">
        <input
          type="text"
          placeholder="Email"
          className="border-2 border-slate-400 rounded-md text-black placeholder-black-50"
          {...register("email")}
        />
        {errors.email && <div className="text-red-500">{errors.email.message}</div>}

        <input
          type="password"
          placeholder="Password"
          className="border-2 border-slate-400 rounded-md text-black placeholder-black-50"
          {...register("password")}

        />
        {errors.password && <div className="text-red-500">{errors.password.message}</div>}
        <Button type="submit" disabled={isSubmitting}>

          {isSubmitting ? "Loading" : "Submit"}
        </Button>
        {errors.root && <div className="text-red-500">{errors.root.message}</div>}

      </form><form onSubmit={handleSubmit(onSubmit)} className="tutorial gap-2 flex max-h-screen flex-col justify-center items-center">
        <input
          type="text"
          placeholder="Email"
          className="border-2 border-slate-400 rounded-md text-black placeholder-black-50"
          {...register("email")}
        />
        {errors.email && <div className="text-red-500">{errors.email.message}</div>}

        <input
          type="password"
          placeholder="Password"
          className="border-2 border-slate-400 rounded-md text-black placeholder-black-50"
          {...register("password")}

        />
        {errors.password && <div className="text-red-500">{errors.password.message}</div>}
        <Button type="submit" disabled={isSubmitting}>

          {isSubmitting ? "Loading" : "Submit"}
        </Button>
        {errors.root && <div className="text-red-500">{errors.root.message}</div>}

      </form>

The complete Code

import { zodResolver } from "@hookform/resolvers/zod";
import { Button } from "./components/button"
import { SubmitHandler, useForm } from "react-hook-form"
import { z } from 'zod';

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
})

type FormFields = z.infer<typeof schema>;

function App() {
  const {
    register,
    handleSubmit,
    setError,
    formState: { errors, isSubmitting }
  } = useForm<FormFields>({
    defaultValues: {
      email: "test@email.com",
    },
    resolver: zodResolver(schema),
  });

  const onSubmit: SubmitHandler<FormFields> = async (data) => {
    try {
      await new Promise((resolve) => setTimeout(resolve, 1000));
      throw new Error();
      console.log(data);
    }
    catch (error) {
      setError("root", { message: "This email is already taken" });
    }
  };

  return (
    <>
      <form onSubmit={handleSubmit(onSubmit)} className="tutorial gap-2 flex max-h-screen flex-col justify-center items-center">
        <input
          type="text"
          placeholder="Email"
          className="border-2 border-slate-400 rounded-md text-black placeholder-black-50"
          {...register("email")}
        />
        {errors.email && <div className="text-red-500">{errors.email.message}</div>}

        <input
          type="password"
          placeholder="Password"
          className="border-2 border-slate-400 rounded-md text-black placeholder-black-50"
          {...register("password")}

        />
        {errors.password && <div className="text-red-500">{errors.password.message}</div>}
        <Button type="submit" disabled={isSubmitting}>

          {isSubmitting ? "Loading" : "Submit"}
        </Button>
        {errors.root && <div className="text-red-500">{errors.root.message}</div>}

      </form>

    </>

  )
}

export default App

Revisiting Zustand and React with TS

Akshay Manoj — Mon, 05 Aug 2024 18:05:23 +0000

This is a simple example which I created to revise the working of Zustand with React and TypeScript with the help of the official Documentation of Zustand
Zustand Official Docs

Installing Zustand using npm

npm install zustand

Defining the types for the values inside the store

We are defining what the type of the state will be and the actions will be so that TypeScript understands while checking it.

type State = {
  firstName: string,
  lastName: string,
  age: number,
}

type Action = {
  updateFirstName: (firstName: State['firstName']) => void;
  updateLastName: (lastName: State['lastName']) => void;
  updateAge: () => void;
}

Creation of a store

A Store is where you initialize the default values for the state and define the actions stating how it should work an manipulate the state (the data set inside the store)

const usePersonStore = create<State & Action>((set) => ({
  firstName: '',
  lastName: '',
  age: 0,
  updateAge: () => set((state) => ({ age: state.age + 1 })),
  updateFirstName: (firstName) => set(() => ({ firstName: firstName })),
  updateLastName: (lastName) => set(() => ({ lastName: lastName })),

}))

Usage of this simple store in React

//COMPONENT 1
export default function App() {
    //we use the state of the store to access the variables stored inside it.
  const firstName = usePersonStore((state) => state.firstName)
  const updateFirstName = usePersonStore((state) => state.updateFirstName)
  const age = usePersonStore((state) => state.age);


  return <>
    <label htmlFor="firstName">
      First Name
      <input type="text" name="firstName" id="firstName"
        onChange={(e) => updateFirstName(e.target.value)}
      />
    </label>

    <AgeComp />

    <p>
      Hello, <strong>{firstName}</strong> and your age is <strong>{age}</strong>
    </p>
  </>
}

//COMPONENT 2
const AgeComp = () => {
  const updateAge = usePersonStore((state) => state.updateAge)
  return <>
    <Button onClick={updateAge}>+</Button>
  </>
}

The Final code in a single file will look like this

import { create } from "zustand";
import { Button } from "./components/button";
type State = {
  firstName: string,
  lastName: string,
  age: number,
}

type Action = {
  updateFirstName: (firstName: State['firstName']) => void;
  updateLastName: (lastName: State['lastName']) => void;
  updateAge: () => void;
}


const usePersonStore = create<State & Actions>((set) => ({
  firstName: '',
  lastName: '',
  age: 0,
  updateAge: () => set((state) => ({ age: state.age + 1 })),
  updateFirstName: (firstName) => set(() => ({ firstName: firstName })),
  updateLastName: (lastName) => set(() => ({ lastName: lastName })),

}))


const AgeComp = () => {
  const updateAge = usePersonStore((state) => state.updateAge)
  return <>
    <Button onClick={updateAge}>+</Button>
  </>
}

export default function App() {

  const firstName = usePersonStore((state) => state.firstName)
  const updateFirstName = usePersonStore((state) => state.updateFirstName)
  const age = usePersonStore((state) => state.age);
  return <>
    <label htmlFor="firstName">
      First Name
      <input type="text" name="firstName" id="firstName"
        onChange={(e) => updateFirstName(e.target.value)}
      />
    </label>

    <AgeComp />

    <p>
      Hello, <strong>{firstName}</strong> and your age is <strong>{age}</strong>
    </p>
  </>
}import { create } from "zustand";
import { Button } from "./components/button";
type State = {
  firstName: string,
  lastName: string,
  age: number,
}

type Action = {
  updateFirstName: (firstName: State['firstName']) => void;
  updateLastName: (lastName: State['lastName']) => void;
  updateAge: () => void;
}


const usePersonStore = create<State & Actions>((set) => ({
  firstName: '',
  lastName: '',
  age: 0,
  updateAge: () => set((state) => ({ age: state.age + 1 })),
  updateFirstName: (firstName) => set(() => ({ firstName: firstName })),
  updateLastName: (lastName) => set(() => ({ lastName: lastName })),

}))


const AgeComp = () => {
  const updateAge = usePersonStore((state) => state.updateAge)
  return <>
    <Button onClick={updateAge}>+</Button>
  </>
}

export default function App() {

  const firstName = usePersonStore((state) => state.firstName)
  const updateFirstName = usePersonStore((state) => state.updateFirstName)
  const age = usePersonStore((state) => state.age);
  return <>
    <label htmlFor="firstName">
      First Name
      <input type="text" name="firstName" id="firstName"
        onChange={(e) => updateFirstName(e.target.value)}
      />
    </label>

    <AgeComp />

    <p>
      Hello, <strong>{firstName}</strong> and your age is <strong>{age}</strong>
    </p>
  </>
}

Creating Slices in zustand

This is to split up a store which can potentially scale up and become huge in the future. So we split up a huge store into slices to achieve modularity.

Creating types for the individual slices

Create a new file inside src/store/fish-bear-slice.ts and start adding the below code.

type BearSlice = {
  bears: number;
  addBear: () => void;
  eatFish: () => void;
  resetBears: () => void;
};

type FishSlice = {
  fishes: number;
  addFish: () => void;
  resetFishes: () => void;
};

type SharedSlice = {
  addBoth: () => void;
  getBoth: () => void;
  resetBoth: () => void;
};

Creating the slices using StateCreator

const createBearSlice: StateCreator<
  BearSlice & FishSlice,
  [],
  [],
  BearSlice
> = (set) => ({
  bears: 0,
  addBear: () => set((state) => ({ bears: state.bears + 1 })),
  eatFish: () => set((state) => ({ fishes: state.fishes - 1 })),
  resetBears: () => set(() => ({ bears: 0 })),
});

const createFishSlice: StateCreator<
  BearSlice & FishSlice,
  [],
  [],
  FishSlice
> = (set) => ({
  fishes: 0,
  addFish: () => set((state) => ({ fishes: state.fishes + 1 })),
  resetFishes: () => set(() => ({ fishes: 0 })),
});

Creating a shared slice

Combining the above given two individual slices to one.This will let you use every single action and state used in the store as one yet manage all the slices modularly.

const createSharedSlice: StateCreator<
  BearSlice & FishSlice,
  [],
  [],
  SharedSlice
> = (set, get) => ({
  addBoth: () => {
    get().addBear();
    get().addFish();
  },
  getBoth: () => get().bears + get().fishes,
  resetBoth: () => {
    get().resetBears();
    get().resetFishes();
  },
});

Creating a combined Store using a custom hook.

We are exporting this custom hook so that we can use it in the react component.

export const useBoundStore = create<BearSlice & FishSlice & SharedSlice>()(
  (...a) => ({
    ...createBearSlice(...a),
    ...createFishSlice(...a),
    ...createSharedSlice(...a),
  })
);

Using the above created combined slice in React

import { useBoundStore } from "./store/fish-bear-slice"


const Controllers = () => {
  const addBear = useBoundStore((state) => state.addBear)
  const addFish = useBoundStore((state) => state.addFish)
  const addBoth = useBoundStore((state) => state.addBoth)
  const resetBoth = useBoundStore((state) => state.resetBoth)
  return <>
    <button onClick={() => addBear()}>Add a bear</button>
    <button onClick={() => addFish()}>Add a fish</button>
    <button onClick={() => addBoth()}>Add both</button>
    <button onClick={() => resetBoth()}>Reset Both</button>
  </>
}

function App() {
  const bears = useBoundStore((state) => state.bears)
  const fishes = useBoundStore((state) => state.fishes)

  return (
    <div>
      <h2>Number of bears: {bears}</h2>
      <h2>Number of fishes: {fishes}</h2>
      <Controllers />
    </div>
  )
}

export default App

Persisting the data inside the state using the persist middleware from zustand

The above code will work perfectly but once you refresh the page the data is not stored anywhere and will reset the data to its default value. To retain the data even after we reload we use the help of the 'persist' middleware from zustand and provide it with a unique localStorage name.

_Persist utilizes the localStorage to persist the data and zustand handles the saving and retrieving part of the job.
_

Import the persist from zustand/middleware

import { persist } from "zustand/middleware";

Add the persist middleware to the combined slice.

Do not use it on individual slices since it will create a problem at the end.

export const useBoundStore = create<BearSlice & FishSlice & SharedSlice>()(
  persist(
    (...a) => ({
      ...createBearSlice(...a),
      ...createFishSlice(...a),
      ...createSharedSlice(...a),
    }),

    { name: "bound-store" }
  )
);