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

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

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

function ControlledInput() {
  const [value, setValue] = React.useState('');

  return (
    <input
      type="text"
      value={value}
      onChange={e => setValue(e.target.value)}
    />
  );
}

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

function UncontrolledInput() {
  const inputRef = React.useRef(null);

  const handleSubmit = () => {
    alert(inputRef.current.value);
  };

  return (
    <>
      <input type="text" ref={inputRef} />
      <button onClick={handleSubmit}>Показать значение</button>
    </>
  );
}

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

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