React-Form-Controls

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

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 3

What are some advantages of using controlled components?

Answer 3

The UI and the data are in sync
Form data can be passed between different components

Question 4

Which style do you prefer?

Answer 4

Controled components as they are easier to access the form data where you can just access the input values by the state variable associated with it

Question 5

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

Answer 5

value and onChange

Question 6

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

Answer 6

React Hook Form, Formik, React Final