React Forms — Interview Questions & Answers

Ques 1: What are forms in React?

Ans: Forms in React are used to collect user input. Unlike HTML forms, React uses controlled components to manage form data via state instead of the DOM.

Ques 2: What is the difference between controlled and uncontrolled components?

Ques 3: How do you create a controlled form in React?

function MyForm() {
  const [name, setName] = useState("");
  return (
    <form>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <p>{name}</p>
    </form>
  );
}

Ques 4: What is onChange in React forms?

Ans: The onChange event updates state whenever input changes, ensuring two-way binding between the UI and the component state.

Ques 5: How do you handle form submission in React?

function handleSubmit(e) {
  e.preventDefault();
  console.log("Form submitted!");
}
<form onSubmit={handleSubmit}>...</form>

Ques 6: What is e.preventDefault() and why is it used?

Ans: It prevents the browser’s default form submission behavior (which reloads the page) so React can handle submission using JavaScript.

Ques 7: How do you handle multiple inputs in a React form?

Ans: Use a single state object and update dynamically using computed property names.

setFormData({ ...formData, [e.target.name]: e.target.value });

Ques 8: How do you handle textarea in React?

<textarea value={message} onChange={(e) => setMessage(e.target.value)} />

Ques 9: How do you handle select dropdowns in React?

<select value={fruit} onChange={(e) => setFruit(e.target.value)}>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
</select>

Ques 10: How do you handle checkboxes in React?

<input
  type="checkbox"
  checked={isChecked}
  onChange={(e) => setIsChecked(e.target.checked)}
/>

Ques 11: How do you handle radio buttons in React?

<input
  type="radio"
  value="male"
  checked={gender === "male"}
  onChange={(e) => setGender(e.target.value)}
/>

Ques 12: How do you manage form validation in React?

Ans: You can validate inputs manually before submission or use libraries like Formik or React Hook Form.

Example:

if (!email.includes("@")) alert("Invalid email");

Ques 13: What are uncontrolled components in React forms?

Ans: Components that store data in the DOM instead of React state, accessed via Refs.

const inputRef = useRef();
console.log(inputRef.current.value);

Ques 14: When should you use uncontrolled components?

Ans: When integrating with non-React code, third-party libraries, or when performance is more critical than reactivity.

Ques 15: How do you reset a form in React?

• Reset the state manually (setState("")).
• Or use the native HTML method:

<form ref={formRef} onSubmit={...}>
  <button type="reset">Reset</button>
</form>

Ques 16: How can you handle dynamic form fields?

Ans: Use arrays in state and render them dynamically with .map().

fields.map((f, i) => <input key={i} value={f} />)

Ques 17: What are the advantages of controlled forms?

• Full control over data.
• Real-time validation.
• Easier debugging and testing.
• Synchronization with other UI states.

Ques 18: What are the disadvantages of controlled forms?

• More boilerplate code.
• Frequent re-renders for every keystroke.

Ques 19: How do libraries like Formik or React Hook Form help in React forms?

Ans: They simplify form management, handle validation efficiently, and reduce re-renders for better performance.

Ques 20: What is the difference between defaultValue and value?

• defaultValue sets the initial value (uncontrolled).
• value makes it controlled by React state.

Ques 21: How do you handle form submission asynchronously in React?

Ans: Use async/await in the onSubmit handler:

async function handleSubmit(e) {
  e.preventDefault();
  const res = await fetch("/api", { method: "POST" });
}

Ques 22: How do you display validation errors dynamically?

Ans: Store validation messages in state and render conditionally:

{error && <p className="error">{error}</p>}

Ques 23: Can React forms handle file uploads?

Ans: Yes, by using the onChange event and FormData API.

const file = e.target.files[0];

Ques 24: How can you manage nested form inputs (objects)?

Ans: Use dot notation and dynamic state updates:

setUser({ ...user, address: { ...user.address, city: "NY" } });

Ques 25: What are best practices for forms in React?

• Use controlled components for reliability.
• Validate inputs in real-time.
• Debounce expensive validations.
• Keep UI and logic separate.
• Use libraries for complex forms.