Контролируемые и неконтролируемые компоненты в React

В React при работе с формами существует два подхода управления значениями полей: контролируемые и неконтролируемые компоненты.

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

Это компонент, в котором значение формы хранится в state React-компонента, и любое изменение пользовательского ввода происходит через onChange и обновление состояния.

Пример:

import { useState } from "react";

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

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

Здесь:

• value управляется через React state
• React знает актуальное значение в каждый момент времени
• Можно валидировать/обновлять данные на лету

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

Это компонент, в котором значение не хранится в состоянии React, а извлекается напрямую из DOM с помощью ref.

Пример

import { useRef } from "react";

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

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

  return (
    <>
      <input type="text" ref={inputRef} />
      <button onClick={handleSubmit}>Отправить</button>
    </>
  );
}

Здесь:

• React не знает, какое значение у input прямо сейчас
• Значение получаем только при необходимости
• Прост в реализации, особенно если нужен доступ к значению один раз

Таблица сравнения

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

Контролируемый:

• Если нужно валидировать ввод в реальном времени
• Для сложных форм
• Когда важен полный контроль

Неконтролируемый:

• Простые формы или поля
• Когда значение нужно получить только при сабмите
• Интеграция со сторонними библиотеками