Question 1

How do Controlled Components and Uncontrolled Components differ, and when should you prefer each?

Accepted Answer

A Controlled component's value is managed by React state (useState), while an Uncontrolled component keeps its value in the DOM and is read through a Ref or FormData.

Question 2

Why can React Hook Form (RHF) perform better than traditional Formik forms?

Accepted Answer

React Hook Form uses the Uncontrolled pattern and registers inputs with Refs, avoiding a full form render on every keystroke, unlike Formik's Controlled State approach.

Question 3

How do you integrate Zod with React forms for End-to-End Type-Safety?

Accepted Answer

Define a Zod Schema, derive its TypeScript type with z.infer, and connect it to a React form with zodResolver for synchronous validation.

Question 4

How do you handle multiple file uploads and upload progress indicators in React forms?

Accepted Answer

Use an input type="file" to read e.target.files, put the files in FormData, and send them with XMLHttpRequest or Axios to listen for onUploadProgress.

Question 5

How do you manage Dynamic Field Arrays whose number of fields changes in a form?

Accepted Answer

Use React Hook Form's useFieldArray to add, remove, and move fields dynamically, giving each field a stable, unique Key.

Question 6

What are Server Actions in React 19, and how do they simplify form submission without JavaScript?

Accepted Answer

They are asynchronous functions that run only on the server and can be passed directly to a <form> action; they work even if JavaScript is disabled in the client browser (Progressive Enhancement).

Question 7

How do you automatically save form drafts (Auto-save) to prevent users from losing their input?

Accepted Answer

Observe form values with Debounce and save them automatically in localStorage or send them to the server in the background; remove the draft after the final submission succeeds.

Question 8

What accessibility standards (Form Accessibility - a11y) should web forms follow?

Accepted Answer

Associate each input with an explicit <label> through htmlFor and id, set aria-invalid and aria-describedby for errors, and support keyboard navigation and automatic focus.

Question 9

How do you prevent double clicks and repeated form submissions (Double Submissions)?

Accepted Answer

Disable the submit button as soon as a request starts using isSubmitting, and cancel or ignore further requests while the first one is running.

Question 10

How do you build a Multi-step Wizard Form while preserving data when a user goes back?

Accepted Answer

Keep the data for all steps in centralized state in the parent component, render the component for the current step, and provide back and next buttons without losing previous input.