Що таке "controlled" і "uncontrolled" компоненти?

ReactJunior~2 хв читання

Основна ідея

У React поля вводу (<input>, <textarea>, <select>) можуть працювати двома способами:

Тип	Хто керує значенням
Controlled (контрольований)	React (через state)
Uncontrolled (неконтрольований)	Сам DOM (внутрішнє значення поля)

1. Controlled (контрольований компонент)

Контрольований компонент - це елемент форми, значення якого повністю контролюється станом React.

Приклад

javascript

function Form() {
  const [name, setName] = useState("");

  return (
    <div>
      <input
        value={name}                // значення береться зі стану
        onChange={(e) => setName(e.target.value)} // оновлюємо стан
      />
      <p>Ви ввели: {name}</p>
    </div>
  );
}

Тут:

value завжди синхронізований зі state
будь-яка зміна йде через setName
React - "джерело істини"

Тобто: DOM → React → render → DOM React знає точно, що зараз в інпуті.

Плюси controlled-компонентів

Повний контроль над даними форми
Легко робити валідацію в реальному часі
Можна реагувати на ввід (наприклад, вмикати кнопку)
Можна скинути / синхронізувати значення програмно

Мінуси

Більше коду (value, onChange)
При дуже великій кількості інпутів (наприклад, 500+) може бути неефективно → але у звичайних формах це не проблема

2. Uncontrolled (неконтрольований компонент)

Неконтрольований компонент - це елемент форми, значення якого зберігається всередині DOM, а не у стані React.

Приклад

javascript

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

  const handleSubmit = () => {
    alert("Ви ввели: " + inputRef.current.value);
  };

  return (
    <div>
      <input ref={inputRef} defaultValue="Tim" />  {/* defaultValue замість value */}
      <button onClick={handleSubmit}>Відправити</button>
    </div>
  );
}

Тут:

React не знає, що зараз в інпуті
значення зберігається в DOM
ми отримуємо його вручну через ref

Плюси uncontrolled-компонентів

Менше коду, простіше для дрібних форм
Підходить, якщо тобі не потрібно реагувати на кожну зміну
Іноді зручний при інтеграції з legacy-кодом або зовнішніми бібліотеками

Мінуси

React не знає поточне значення поля
Не можна робити instant-валідацію або автооновлення
Не можна скинути значення через setState - тільки через DOM

3. Порівняння на практиці

Характеристика	Controlled	Uncontrolled
Хто зберігає значення	React state	DOM
Як задається початкове значення	`value={state}`	`defaultValue="..."`
Як зчитується значення	Зі `state`	Через `ref.current.value`
Коли використовувати	Якщо потрібно реагувати на ввід	Якщо форма проста і не потрібна реакція
Приклади використання	Реєстрація, пошук, фільтри	Швидкі форми, сторонні плагіни
Можливість скинути з React	Так	Ні (тільки вручну)

4. Типовий приклад валідації

Controlled (легко)

javascript

function LoginForm() {
  const [email, setEmail] = useState("");

  const isValid = email.includes("@");

  return (
    <form>
      <input value={email} onChange={e => setEmail(e.target.value)} />
      <button disabled={!isValid}>Увійти</button>
    </form>
  );
}

Uncontrolled (складніше)

javascript

function LoginForm() {
  const emailRef = useRef();

  const handleSubmit = (e) => {
    e.preventDefault();
    const email = emailRef.current.value;
    if (!email.includes("@")) alert("Некоректний email");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input ref={emailRef} defaultValue="" />
      <button>Увійти</button>
    </form>
  );
}

5. Коли використовувати який підхід

Ситуація	Що обрати
Форма з динамічною валідацією	Controlled
Форма, значення якої потрібно скинути / синхронізувати	Controlled
Проста форма, що не потребує контролю	Uncontrolled
Інтеграція зі сторонніми JS-бібліотеками	Uncontrolled
Форми з десятками інпутів і без динаміки	Uncontrolled (для оптимізації)

Комбінований підхід

Іноді використовують гібрид - controlled + uncontrolled. Наприклад, defaultValue задає старт, а потім React починає контролювати:

javascript

<input defaultValue="Tim" onChange={(e) => setName(e.target.value)} value={name} />

React "вступає в гру" після першої зміни - але краще або контролювати поле повністю, або не контролювати взагалі.

Підсумок

Тип компонента	Керує значенням	Де зберігається	Застосування
Controlled	React	У state	Коли потрібен контроль, валідація, скидання
Uncontrolled	DOM	У самому елементі	Прості, статичні форми, інтеграція з legacy

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.