HTML forms → keep internal state inside DOM w/ some default behavior onSubmit (action)

controlled components → offer API

• enable full control of state of elements at any point of time - using react state
• local state + value prop (used to perform state delegation)
• onChange callback

uncontrolled components

• like standard HTML form inputs
• use react ref to pull value from field when needed
• <input type="file" /> is always an uncontrolled component because its value is read-only and can't be set programmatically

const Form = () => { 
 const inputRef = useRef(null); 

 const handleSubmit = () => { 
   const inputValue = inputRef.current.value; 
   // Do something with the value 
 } 
 return ( 
   <form onSubmit={handleSubmit}> 
     <input ref={inputRef} type="text" /> 
   </form> 
 ); 
};

controlled components

• accept current value as prop and callback to change that value
• value of input has to live in react state
• component that renders the input saves it in its state
• every time a new character is typed the handleChange function executes - recieves new value of input and sets it to the state
• forms can respond to input changes immediately, for example, by:
  • Instant validation per field
  • Disabling the submit button unless all fields have valid data
  • Enforcing a specific input format, like phone or credit card numbers