Submitting and disabling

The classic form bug: user clicks Submit, nothing visibly happens because the network is slow, user clicks again, now the form has been submitted twice. The fix is trivial: disable the button while submitting, and show a loading label so the user knows something is happening.

LoginForm.tsx

tsx

const {
  register,
  handleSubmit,
  formState: { isSubmitting },
} = useForm<FormValues>({
  resolver: zodResolver(LoginSchema),
});

return (
  <form onSubmit={handleSubmit(onSubmit)}>
    {/* fields */}
    <button disabled={isSubmitting}>
      {isSubmitting ? 'Logging in...' : 'Log in'}
    </button>
  </form>
);

isSubmitting is a first-class formState field in React Hook Form.

isSubmitting does double duty. The button is disabled, which prevents double-submits. The label changes, which tells the user the app is responding. A single line of markup fixes one of the most common and embarrassing bugs in form handling.

Quiz: Quiz

Loading practice…

Checkpoint: Forms and validation checkpoint

Loading practice…