Detailed explanation
In React, handling forms means collecting field values, validating them, displaying useful feedback, and submitting valid data while tracking request status. For controlled inputs, keep values in component state and update them through onChange; use checked rather than value for checkboxes. Initialise text values to empty strings to avoid switching between uncontrolled and controlled inputs. Uncontrolled inputs let the browser maintain values, which you can read using refs or FormData. Controlled inputs suit small forms and tightly linked UI behaviour; larger forms often benefit from a form library.
Validation should cover required fields, formats, length limits, and relationships such as matching passwords. Choose its timing deliberately: on-change validation gives immediate feedback but can interrupt typing, on-blur validation checks a field after the user leaves it, and submit validation checks the complete form before processing. A practical approach is to show errors after a field is touched or submission is attempted, then revalidate as the user corrects it. Store errors by field name, place messages beside their inputs, and connect them using aria-describedby and aria-invalid. Checking whether an email contains '@' is only a basic demonstration, not reliable email validation.
For a traditional React onSubmit handler, call preventDefault() to stop the browser's default submission, validate the values, and send data only if validation passes. Track a pending state, discourage duplicate submissions, and preserve entered values when the request fails. Map server-side field errors back to inputs and show a form-level message for general failures. Client-side validation improves usability, but the server must independently validate and authorise every request because browser checks can be bypassed.
React Hook Form is a common production option, often paired with a schema validator such as Zod or Yup through a resolver. It registers inputs and primarily uses uncontrolled inputs with subscriptions to reduce unnecessary rerenders; Controller integrates controlled UI components. A schema centralises validation rules and can support type inference, depending on the library. Interviewers look for sensible validation timing, accessible feedback, reliable submission handling, and an explanation of when simple React state is enough versus when a library adds value.
Key points to remember
- Use controlled state, uncontrolled inputs, or a form library according to form complexity.
- Choose on-change, on-blur, and submit validation deliberately rather than showing errors immediately everywhere.
- Display field-specific errors accessibly and keep form-level failures separate.
- Handle pending requests, duplicate submissions, server errors, and preservation of entered values.
- React Hook Form with a schema resolver simplifies validation, but server-side checks remain mandatory.
Common mistakes candidates make
- Treating a basic client-side email check as complete validation or a security boundary.
- Showing errors before users interact with fields, or displaying errors without accessible associations.
- Submitting without handling pending and failure states, or clearing user input after a failed request.
Likely follow-up questions
What is the difference between controlled and uncontrolled inputs?
A controlled input receives its value from React state and updates that state through an event handler. An uncontrolled input keeps its current value in the DOM, which you can read through a ref or FormData.
How would you validate whether a username is available?
Perform basic local checks first, then debounce an availability request or run it on blur. Ignore stale responses, and enforce uniqueness on the server during submission because availability can change after the check.
How does React Hook Form handle schema validation?
A resolver adapts a schema library such as Zod or Yup to React Hook Form and maps validation failures into field errors. handleSubmit runs validation before invoking the valid-submit callback, while the configured validation mode controls checks during interaction.
Interview tip: Explain the value–validation–submission flow first, then describe your choice of validation timing and when you would introduce React Hook Form.