Implementing React Hook Form

23.07.2022 — Implementing React Hook Form, 4th week, 5th week — 1 min read

After analyzing the the benchmarks and taking with my mentors , we are decided to go with React Hook Form for it’s performace , low package size etc ..

Their is many ways to integrate React Hook form in the app , using useFormContext (easy way no need pass props)and using Controller . After analylizing both ways i decied to go with Controller because useFormContext has some performance issues . For validation we use yup to validate the fields.

1//demo.tsx
2import {useForm,controller} form "react-hook-form";
3//types of input
4type FormValues = {
5name:string
6age:number
7address?:string
8}
9//validation
10const validationSchema = yup.object({
11  name: yup.string().required("Required"),
12  age: yup.number().required("Required")
13  address: yup.string().required("Required")
14});
15//destructure the **useForm**
16const { register, handleSubmit } = useForm<FormVales>({});
17//submit function
18const onSubmit = async data<FormValues> => { console.log(data); };
19//controller conponent
20<Controller
21  control={control}
22  name="test"
23  render={({
24    field: { onChange, onBlur, value, name, ref },
25    fieldState: { invalid, isTouched, isDirty, error },
26    formState,
27  }) => (
28    <Checkbox
29      onBlur={onBlur} // notify when input is touched
30      onChange={onChange} // send value to hook form
31      checked={value}
32      inputRef={ref}
33    />
34  )}
35/>
36//submmit button
37<button type = "submit"> submit </button>
38//DS: this code is not actual , it is just for understanding , actual code more complicated

Profiling data

Flamegraph

Rankgraph

Timelinegraph

Render count

Referance :

https://react-hook-form.com/

https://blog.logrocket.com/react-hook-form-vs-formik-comparison/#:~:text=Technical comparison of React Hook Form and Formik&text=Based on the minzipped size,the difference in open issues.

Thanks .