Jaký je rozdíl mezi řízeným a řízeným vstupem a kdy co používat?

Řízený vstup — je prvek formuláře, jehož hodnota je plně řízena stavem komponenty (například v Reactu). Hodnota pole je uložena ve stavu a aktualizována prostřednictvím obslužné funkce události.

Neřízený vstup — je prvek formuláře, který je řízen samotným DOMem, nikoli stavem komponenty. Hodnota je čtena přes reference, když je to potřeba.

Kdy používat:

• Řízený vstup je vhodný, když je třeba okamžitě reagovat na změny, validovat data, synchronizovat se stavem aplikace.
• Neřízený vstup je jednodušší a rychlejší pro jednoduché formuláře, kde není potřeba stálá kontrola zadávání.

Příklad řízeného vstupu v Reactu:

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

Příklad neřízeného vstupu:

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