Form: react-hook-form V7

redux-hook-form⁷.10, React¹⁷.0.2, Material UI⁴.11, Created at July 21, 2021, Read Series…

Chose react-hook-form V7 instead of formik, chose custom validation instead of yup. Optionally, you can install yup.

React-hook-form is a library that helps you validate forms in React. React-hook-form is a minimal library without any other dependencies. It is performant and straightforward to use, requiring developers to write fewer lines of code than other form libraries.

There are a lot of papers on react-hook-form V6, there are some breaking changes when migrate V6 to V7.

npm install react-hook-form

Example in src/features/forms/ReactHookForm.tsx

[Try to understand] useForm, Controller
[Try to understand] formValidation definition and usage in return (…)
[Try to understand] find password in following code as an example.
[Try to understand] value={value} in TextField and control={control} in Controller, on how to bind a field to a UI component
[Try to understand] error={!!error} and helperText={error ? error.message : null} to find out difference of error and helperText.
[Try to understand] handleSubmit, onSubmit and <Button type=”submit”/> on how to submit html form.

// imports
import { useForm, Controller } from 'react-hook-form';
// useStyles 
,,,
export default function ReactHookForm(): JSX.Element {
  const classes = useStyles();
  const { handleSubmit, control } = useForm();
  const formValidation = {
    firstName: { required: 'First name required' },
    lastName: { required: 'Last name required' },
    email: { required: 'Email required' },
    password: {
      required: 'Password required',
      pattern: {
        value: /^(?=.*\d)(?=.*[!@#$%^&*])(?=.*[a-z])(?=.*[A-Z]).{8,}$/,
        message: 'UIStringResource:Common_EmailFormatErrorMessage'
      }
    }
  };
  const handleClose = (data: any) => {
    console.log(data);
  }
  const onSubmit = (data: any) => {
    console.log(data);
  };
return (
    <form className={classes.root} 
        onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="firstName"
        control={control}
        defaultValue=""
        render={({ field:{onChange, value}, fieldState: {error}})=>(
          <TextField
            label="First Name"
            variant="filled"
            value={value}
            onChange={onChange}
            error={!!error}
            helperText={error ? error.message : null}
          />
        )}
        rules={formValidation.firstName}
      />
      <Controller
        name="lastName"
        control={control}
        defaultValue=""
        render={({ field:{onChange, value}, fieldState: {error}})=>(
          <TextField
            label="Last Name"
            variant="filled"
            value={value}
            onChange={onChange}
            error={!!error}
            helperText={error ? error.message : null}
          />
        )}
        rules={formValidation.lastName}
      />
      <Controller
        name="email"
        control={control}
        defaultValue=""
        render={({ field:{onChange, value}, fieldState: {error}})=>(
          <TextField
            label="Email"
            variant="filled"
            value={value}
            onChange={onChange}
            error={!!error}
            helperText={error ? error.message : null}
            type="email"
          />
        )}
        rules={formValidation.email}
      />
      <Controller
        name="password"
        control={control}
        defaultValue=""
        render={({ field:{onChange, value}, fieldState: {error}})=>(
          <TextField
            label="Password"
            variant="filled"
            value={value}
            onChange={onChange}
            error={!!error}
            helperText={error ? error.message : null}
            type="password"
          />
        )}
        rules={formValidation.password}
      />
      <div>
        <Button variant="contained" onClick={handleClose}>
          Cancel
        </Button>
        <Button type="submit" variant="contained" color="primary">
          Signup
        </Button>
      </div>
    </form>
  );
};

Github commits is here: Basic-1.8.1. Form: react-hook-form V7

Conclusion

react-hook-form V7 will have better type checks in general, smaller, faster, and more developer-friendly, only available for function component.
[Important] use react-hook-form V7if you are using function component, use formik v2 if you are still using class component.
[Important] be cautious, some breaking changes when upgrade toV7from exiting react-hook-form V6projects. This is one of key reasons to start a new React Template from scratch.