Qual è la differenza tra input controllato e non controllato e quando usarli?

Input controllato — è un elemento di modulo il cui valore è completamente controllato dallo stato del componente (ad esempio, in React). Il valore del campo viene memorizzato nello stato e aggiornato tramite un gestore di eventi.

Input non controllato — è un elemento di modulo gestito dal DOM stesso, non dallo stato del componente. Il valore viene letto tramite riferimenti quando necessario.

Quando usarlo:

• L'input controllato è utile quando si deve reagire immediatamente ai cambiamenti, convalidare i dati, sincronizzare con lo stato dell'applicazione.
• L'input non controllato è più semplice e veloce per moduli semplici dove non è richiesta una sorveglianza costante dell'input.

Esempio di input controllato in React:

function MyInput() {
  const [value, setValue] = React.useState('');
  return <input value={value} onChange={e => setValue(e.target.value)} />;
}

Esempio di input non controllato:

function MyInput() {
  const inputRef = React.useRef(null);
  const handleSubmit = () => {
    alert(inputRef.current.value);
  };
  return <>
    <input ref={inputRef} />
    <button onClick={handleSubmit}>Invia</button>
  </>;
}