Controlled input — это элемент формы, значение которого полностью контролируется состоянием компонента (например, в React). Значение поля хранится в состоянии, и обновляется через обработчик событий.

Uncontrolled input — элемент формы, который управляется самим DOM, а не состоянием компонента. Значение читается через рефы, когда это нужно.

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

Controlled input удобен, когда нужно сразу реагировать на изменения, валидировать данные, синхронизировать с состоянием приложения.
Uncontrolled input проще и быстрее для простых форм, где не требуется постоянный контроль за вводом.

Пример controlled input в React:

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

Пример uncontrolled input:

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

В чём разница между controlled и uncontrolled input и когда что использовать?