Back to articles
React Hook Form Has a Free Form Library: Build Performant Forms With Zero Re-Renders and Built-In Validation

React Hook Form Has a Free Form Library: Build Performant Forms With Zero Re-Renders and Built-In Validation

via Dev.to ReactAlex Spinov

Controlled forms in React re-render on every keystroke. Formik adds 12KB and still re-renders. You manage onChange , onBlur , error states, and touched flags manually. What if your form library used uncontrolled inputs, never caused unnecessary re-renders, and validated with zero boilerplate? That's React Hook Form. 8KB, zero dependencies, near-zero re-renders. Basic Usage import { useForm } from " react-hook-form " ; interface LoginForm { email : string ; password : string ; } function Login () { const { register , handleSubmit , formState : { errors , isSubmitting } } = useForm < LoginForm > (); const onSubmit = async ( data : LoginForm ) => { await fetch ( " /api/login " , { method : " POST " , body : JSON . stringify ( data ) }); }; return ( < form onSubmit = { handleSubmit ( onSubmit )} > < input {... register ( " email " , { required : " Email required " , pattern : { value : / \S +@ \S +/ , message : " Invalid email " } })} / > { errors . email && < span > { errors . email . mes

Continue reading on Dev.to React

Opens in a new tab

Read Full Article
2 views

Related Articles