How to use React Hook Form
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Using React Hook Form provides highly performant form handling with minimal re-renders and excellent TypeScript support for modern React applications.
As the creator of CoreUI with extensive React experience since 2014, I’ve implemented React Hook Form in performance-critical enterprise applications for optimal user experience and developer productivity.
The most effective approach uses the useForm hook with register method for input handling and built-in validation rules for comprehensive form management.
This method delivers superior performance through uncontrolled components while maintaining clean, declarative form logic with minimal boilerplate code.
Use React Hook Form’s useForm hook with register method for performant form handling with minimal re-renders.
import { useForm } from 'react-hook-form'
const RegistrationForm = () => {
const {
register,
handleSubmit,
formState: { errors, isSubmitting },
reset
} = useForm({
defaultValues: {
username: '',
email: '',
password: ''
}
})
const onSubmit = async (data) => {
try {
const response = await fetch('/api/register', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
})
if (response.ok) {
reset()
console.log('Registration successful')
}
} catch (error) {
console.error('Registration failed:', error)
}
}
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input
{...register('username', {
required: 'Username is required',
minLength: {
value: 3,
message: 'Username must be at least 3 characters'
}
})}
placeholder="Username"
type="text"
/>
{errors.username && (
<span className="error">{errors.username.message}</span>
)}
<input
{...register('email', {
required: 'Email is required',
pattern: {
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
message: 'Invalid email address'
}
})}
placeholder="Email"
type="email"
/>
{errors.email && (
<span className="error">{errors.email.message}</span>
)}
<input
{...register('password', {
required: 'Password is required',
minLength: {
value: 8,
message: 'Password must be at least 8 characters'
}
})}
placeholder="Password"
type="password"
/>
{errors.password && (
<span className="error">{errors.password.message}</span>
)}
<button type="submit" disabled={isSubmitting}>
{isSubmitting ? 'Registering...' : 'Register'}
</button>
</form>
)
}
This code demonstrates React Hook Form’s core features with the register function spreading input props and validation rules directly onto form elements. The form uses uncontrolled components for optimal performance, avoiding unnecessary re-renders while providing comprehensive validation and error handling. The handleSubmit wrapper manages form submission and validation automatically, while formState provides access to errors and submission status for UI feedback.
Best Practice Note:
This is the React Hook Form implementation we use in CoreUI dashboard applications for maximum performance and minimal bundle size. React Hook Form excels in complex forms where performance matters, offering better performance than Formik with less boilerplate code.
