Interview Q&A / React

1. What is the difference between controlled and uncontrolled components in React?

   In a controlled component, React state holds the input's value and every change goes through an onChange handler. In an uncontrolled component, the browser DOM keeps the value and you read it when needed, for example with a ref or from the form data on submit.

   BeginnerIn-depth3 min read
2. How do you manage several form fields with a single state object?

   Store the fields in one object and give each input a name attribute. One onChange handler reads e.target.name and e.target.value and updates that key with computed property syntax, copying the rest with spread.

   BeginnerQuick answer1 min read
3. Why does a controlled input stop accepting typing in React?

   A controlled input shows exactly what its value prop says. If you set value without an onChange that updates state, React keeps resetting it to the old value, so the field looks frozen and also warns in the console.

   BeginnerQuick answer1 min read
4. For a simple contact form, would you use controlled or uncontrolled inputs?

   For a few fields that are only read on submit, uncontrolled inputs with FormData are enough and re-render less. Use controlled inputs when you need live validation, dependent fields, formatting as the user types or to disable the button.

   IntermediateQuick answer1 min read
5. How do you read a file from an input type file in React?

   File inputs are always uncontrolled. Read e.target.files in onChange, take the File object, and either upload it with FormData or preview it with URL.createObjectURL. You cannot set a file input's value from state.

   IntermediateQuick answer1 min read
6. How would you validate a React form without a library?

   Keep values and an errors object in state. Write a validate function that returns errors from the values, run it on submit (and optionally on blur), call preventDefault, and submit only when the errors object is empty.

   IntermediateQuick answer1 min read
7. What does the useFormStatus hook do in React 19?

   useFormStatus, from react-dom, reads the status of the parent form: whether it is pending, plus the submitted data. It must be called inside a component rendered within the form, which lets a submit button disable itself.

   IntermediateQuick answer1 min read