Koja je razlika između kontrolisanog i nekontrolisanog unosa i kada koristiti jedno ili drugo?

Kontrolisani unos — ovo je element forme čija je vrednost potpuno kontrolisana stanjem komponente (na primer, u React-u). Vrednost polja se čuva u stanju i ažurira putem handlera događaja.

Nekontrolisani unos — ovo je element forme koji se upravlja samim DOM-om, a ne stanjem komponente. Vrednost se čita putem referenci kada je potrebno.

Kada koristiti:

• Kontrolisani unos je pogodan kada je potrebno odmah reagovati na promene, validirati podatke, sinhronizovati sa stanjem aplikacije.
• Nekontrolisani unos je jednostavniji i brži za jednostavne forme gde nije potrebna stalna kontrola unosa.

Primer kontrolisanog unosa u React-u:

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

Primer nekontrolisanog unosa:

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