fix: Use useWatch hook instead of form.watch for performance (#531)

Author: ivan-dalmet

src/components/Form/FieldSelect/docs.stories.tsx

@@ -1,6 +1,6 @@
 import { Box, Button, Stack } from '@chakra-ui/react';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
+import { useForm, useWatch } from 'react-hook-form';
 import { z } from 'zod';
 
 import { Form, FormField, FormFieldController, FormFieldLabel } from '../';
@@ -112,6 +112,7 @@ export const Disabled = () => {
 
 export const ChakraProps = () => {
   const form = useForm<FormSchema>(formOptions);
+  const color = useWatch({ name: 'color', control: form.control });
 
   return (
     <Form {...form} onSubmit={(values) => console.log(values)}>
@@ -128,7 +129,7 @@ export const ChakraProps = () => {
               chakraStyles: {
                 control: (provided) => ({
                   ...provided,
-                  backgroundColor: `${form.watch('color')}.100`,
+                  backgroundColor: `${color}.100`,
                 }),
               },
             }}

src/features/account/AccountEmailForm.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Button, Flex, Stack } from '@chakra-ui/react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { parseAsString, useQueryStates } from 'nuqs';
-import { SubmitHandler, useForm } from 'react-hook-form';
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
 import { ErrorPage } from '@/components/ErrorPage';
@@ -57,7 +57,7 @@ export const AccountEmailForm = () => {
     },
   });
 
-  const email = form.watch('email');
+  const email = useWatch({ name: 'email', control: form.control });
 
   const onSubmit: SubmitHandler<FormFieldsAccountEmail> = (values) => {
     updateEmail.mutate(values);

src/features/auth/PageRegister.tsx

@@ -4,7 +4,7 @@ import { Box, Button, Flex, Heading, Stack } from '@chakra-ui/react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
-import { useForm } from 'react-hook-form';
+import { useForm, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
 import {
@@ -54,7 +54,7 @@ export default function PageRegister() {
     },
   });
 
-  const language = form.watch('language');
+  const language = useWatch({ name: 'language', control: form.control });
 
   // Change language based on form
   useEffect(() => {