React-Form-Control

Question 1

How do controlled components differ from uncontrolled components?

Answer 1

For controlled elements, React takes control of the form data and maintains the state of the form element. The component decides when and how to update the state, and it re-renders itself based on the state changes.

For uncontrolled elements, a form element in a component is controlled by the DOM. The DOM decides the state of the input element and updates it based on a user’s input.

Question 2

What are some advantages of using uncontrolled components?

Answer 2

components don’t have to re-render

Question 3

What are some advantages of using controlled components?

Answer 3

The UI and the data are in sync
Form component can respond to input changes immediately

Question 4

Which style do you prefer?

Question 5

What two props must you pass to an input for it to be “controlled”?

Answer 5

A value prop for text inputs and a onChange event prop

Question 6

What are some popular npm packages for creating forms in React?

Answer 6

React Hook Form, Formik, and React Final Form.