Чем отличаются контролируемые и неконтролируемые компоненты в React?

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

Неконтролируемые компоненты (uncontrolled components) используют внутреннее состояние DOM-элемента для хранения значения, например, через ref. React не управляет значением напрямую.

Пример контролируемого компонента:

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

Пример неконтролируемого компонента:

function UncontrolledInput() {
  const inputRef = React.useRef(null);
  const handleClick = () => {
    alert(inputRef.current.value);
  };
  return <>
    <input ref={inputRef} />
    <button onClick={handleClick}>Показать значение</button>
  </>;
}