Care este diferența dintre input controlat și necontrolat și când să folosești fiecare?

Input controlat — este un element de formular a cărui valoare este complet controlată de starea componentului (de exemplu, în React). Valoarea câmpului este stocată în stare și actualizată printr-un handler de evenimente.

Input necontrolat — este un element de formular gestionat de DOM în sine, nu de starea componentului. Valoarea se citește prin referințe atunci când este necesar.

Când să folosiți:

• Inputul controlat este convenabil atunci când trebuie să reacționeze imediat la schimbări, să valideze datele, să sincronizeze cu starea aplicației.
• Inputul necontrolat este mai simplu și mai rapid pentru formulare simple, unde nu este nevoie de control constant asupra introducerii.

Exemplu de input controlat în React:

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

Exemplu de input necontrolat:

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