Form state is harder than it looks
A form is a deceptive amount of state. The value of every field, whether each field has been touched, whether it has changed, whether the whole form is submitting, whether it is valid, which fields have errors. Writing this with useState from scratch works for one field. For ten fields it becomes a mess.
function LoginForm() {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [usernameError, setUsernameError] = useState('');
const [passwordError, setPasswordError] = useState('');
const [submitting, setSubmitting] = useState(false);
// validation, submission, error clearing all in the component
// and it only gets worse from here
}The vanilla useState version. Works for two fields, scales poorly.
React Hook Form exists to manage all of this in one hook. You declare your fields, pass a validation schema, and the hook gives you values, errors, touched, dirty, and submission state. The component stays focused on what it renders instead of how to track state.
Quiz: Quiz
Loading practice…