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

Неконтролируемый компонент — это компонент, который хранит своё состояние внутри DOM, а не в React state. Для доступа к значению используется прямой доступ к DOM через ref.

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

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} defaultValue="" />
      <button onClick={handleClick}>Показать значение</button>
    </>
  );
}

Контролируемые компоненты дают полный контроль над состоянием и удобны для валидации и сложной логики, неконтролируемые проще и ближе к обычному HTML.

В чём разница между контролируемым и неконтролируемым компонентом в React?