react-form-controls Flashcards
How do controlled components differ from uncontrolled components?
An input like <input></input> is uncontrolled. Even if you pass an initial value like <input></input>, your JSX only specifies the initial value. It does not control what the value should be right now.
To render a controlled input, pass the value prop to it (or checked for checkboxes and radios). React will force the input to always have the value you passed. Usually, you would do this by declaring a state variable:
In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself. To write an uncontrolled component, instead of writing an event handler for every state update, you can use a ref to get form values from the DOM.
What are some advantages of using uncontrolled components?
No component re-renders
Browser DOM handles the changes to the element
Simple to use
Keeps track of the internal state
What are some advantages of using controlled components?
The UI and the data are in sync
Form data can be passed between different components
The event handler and the value prop can be from the parent or a redux store
The React component acts as a source of truth for this component
When you use a controlled input, you set the state on every keystroke.
Which style do you prefer?
controlled
What two props must you pass to an input for it to be “controlled”?
value, onChange
What are some popular npm packages for creating forms in React?
React Hook Form, Formik, and React Final Form.
