Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке "controlled" і "uncontrolled" компоненти?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Основна ідея

У 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 |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати650 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.