What is form handling in React?
Why Interviewers Ask This
This question tests conceptual clarity. Interviewers want to hear a precise, confident definition before moving to more complex React.js topics. It also reveals how well you can explain technical ideas to non-experts.
Answer
React form handling typically uses controlled components — form elements whose values are driven by React state. For each input: (1) Bind its value to state: value={formData.email}. (2) Update state on change: onChange={e => setFormData({...formData, email: e.target.value})}. (3) Handle submission: onSubmit={e => { e.preventDefault(); submitData(formData); }}. Multiple inputs with one handler: use the input's name attribute: const handleChange = e => setFormData(prev => ({ ...prev, [e.target.name]: e.target.value }));. Checkboxes: use checked instead of value. Select: use value on the <select> element, not on <option>. Validation: track errors in state and display conditionally. Libraries: React Hook Form, Formik, and Zod (for validation) are popular for complex forms because they reduce boilerplate, optimize re-renders, and handle validation declaratively. React Hook Form is particularly performant because it uses uncontrolled inputs with refs.
Common Mistake
Many candidates answer correctly but can't explain the 'why'. Always be prepared to justify your answer with a concrete example or use case from your React.js experience.
Previous
What is event handling in React?
Next
What is the difference between React.Component and React.PureComponent?