Aký je rozdiel medzi kontrolovaným a nekontrolovaným vstupom a kedy čo použiť?

Riadený vstup — je prvok formulára, ktorého hodnota je úplne riadená stavom komponentu (napríklad v React). Hodnota poľa je uložená v stave a aktualizuje sa prostredníctvom obsluhy udalostí.

Neriadený vstup — je prvok formulára, ktorý je spravovaný samotným DOM-om, nie stavom komponentu. Hodnota sa číta cez referencie, keď je to potrebné.

Kedy použiť:

• Riadený vstup je vhodný, keď je potrebné okamžite reagovať na zmeny, overiť údaje, synchronizovať so stavom aplikácie.
• Neriadený vstup je jednoduchší a rýchlejší pre jednoduché formuláre, kde nie je potrebný neustály dohľad nad vkladaním.

Príklad riadeného vstupu v React:

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

Príklad neriadeného vstupu:

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