Каква е разликата между контролирано и неконтролирано въвеждане и кога да използвате кое?

Контролирано въвеждане — това е елемент на форма, чиято стойност е напълно контролирана от състоянието на компонента (например, в React). Стойността на полето се съхранява в състоянието и се актуализира чрез обработчик на събития.

Неконтролирано въвеждане — това е елемент на форма, който се управлява от самия DOM, а не от състоянието на компонента. Стойността се чете чрез референции, когато е необходимо.

Кога да използвате:

• Контролираното въвеждане е удобно, когато трябва да реагирате незабавно на промените, да валидирате данни, да синхронизирате със състоянието на приложението.
• Неконтролираното въвеждане е по-лесно и по-бързо за прости форми, където не е необходим постоянен контрол върху въвеждането.

Пример за контролирано въвеждане в React:

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

Пример за неконтролирано въвеждане:

function MyInput() {
  const inputRef = React.useRef(null);
  const handleSubmit = () => {
    alert(inputRef.current.value);
  };
  return <>
    <input ref={inputRef} />
    <button onClick={handleSubmit}>Изпрати</button>
  </>;
}