Jaka jest różnica między kontrolowanym a niekontrolowanym inputem i kiedy co używać?

Kontrolowane wejście — to element formularza, którego wartość jest całkowicie kontrolowana przez stan komponentu (np. w React). Wartość pola jest przechowywana w stanie i aktualizowana przez obsługę zdarzeń.

Niekontrolowane wejście — to element formularza, który jest zarządzany przez sam DOM, a nie przez stan komponentu. Wartość odczytuje się za pomocą referencji, gdy jest to potrzebne.

Kiedy używać:

• Kontrolowane wejście jest wygodne, gdy trzeba natychmiast reagować na zmiany, walidować dane, synchronizować z stanem aplikacji.
• Nie kontrolowane wejście jest prostsze i szybsze dla prostych formularzy, gdzie nie jest wymagana stała kontrola nad wprowadzaniem danych.

Przykład kontrolowanego wejścia w React:

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

Przykład niekontrolowanego wejścia:

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