Чем отличается controlled от uncontrolled компонентов?

1. Контролируемый компонент (родителем)

Родительский компонент управляет состоянием дочернего с помощью props.

Пример:

function InputField({ value, onChange }) {
  return <input type="text" value={value} onChange={onChange} />;
}

function ParentComponent() {
  const [inputValue, setInputValue] = useState('');

  return (
    <InputField
      value={inputValue}
      onChange={(e) => setInputValue(e.target.value)}
    />
  );
}

Особенности:

• InputField не хранит своё состояние.

• Состояние полностью контролируется родителем.

2. Неконтролируемый компонент (родителем)

Компонент управляет своим состоянием сам, без участия родителя.

Пример:

function UncontrolledComponent() {
  const [inputValue, setInputValue] = useState('');

  const handleSubmit = () => {
    alert('Input value: ' + inputValue);
  };

  return (
    <div>
      <input 
        type="text" 
        value={inputValue} 
        onChange={(e) => setInputValue(e.target.value)} 
      />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

Особенности:

• Состояние (inputValue) хранится внутри компонента.

• Родитель не контролирует этот input.

• Компонент полностью автономен.

3. Контролируемый элемент формы

Значение элемента хранится в state и обновляется через onChange.

Пример:

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

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return <input type="text" value={value} onChange={handleChange} />;
}

Особенности:

• React хранит актуальное значение (value) в state.

• Каждое изменение вызывает onChange, что обновляет state.

• React полностью контролирует содержимое поля.

4. Неконтролируемый элемент формы

Значение элемента хранится в DOM, а не в state.

Пример:

function UncontrolledInput() {
  const inputRef = useRef();

  const handleSubmit = () => {
    alert('Input value: ' + inputRef.current.value);
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

Особенности:

• React не хранит значение поля.

• Доступ к значению осуществляется напрямую через ref.

• Такой подход проще, но не всегда подходит для сложных форм.

Итог

• Компоненты (уровень родителя):

  • Контролируемые → состояние передаётся через props.

  • Неконтролируемые → компонент сам управляет своим состоянием.

• Элементы формы:

  • Контролируемые → React хранит значение в state.

  • Неконтролируемые → значение живёт в DOM, доступ через ref.