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

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

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

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

Контент

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

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

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

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

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

## Визначення

> **Controlled Component** - це компонент, у якого **значення повністю керується станом React (state)**.
>
> Іншими словами: **UI = функція від стану.**

---

## Ідея

У звичайному HTML `<input>` сам зберігає своє значення (внутрішньо, в DOM).
А в React, якщо ти робиш **контрольований компонент**,
значення цього поля зберігається **в стані компонента**, а не в DOM.

---

## Приклад контрольованого компонента

```javascript
function NameForm() {
  const [name, setName] = useState('');

return (
    <div>
      <input
        type="text"
        value={name}                 // <- значення береться зі state
        onChange={(e) => setName(e.target.value)} // <- оновлюємо state при вводі
      />
      <p>Привіт, {name || 'гість'}!</p>
    </div>
  );
}
```

> Тут `input` **контролюється станом** `name`:
>
> - React зберігає значення поля у своєму `state`;
> - при кожній зміні `onChange` оновлює стан;
> - UI автоматично перемальовується з новим значенням.

---

## Приклад неконтрольованого компонента (для порівняння)

```javascript
function NameForm() {
  const inputRef = useRef();

function handleSubmit() {
    alert(`Привіт, ${inputRef.current.value}`);
  }

return (
    <div>
      <input type="text" ref={inputRef} /> {/* значення зберігається в DOM */}
      <button onClick={handleSubmit}>Надіслати</button>
    </div>
  );
}
```

> Тут `<input>` **неконтрольований** - React не знає його значення,
> воно живе всередині DOM. Ми можемо прочитати його тільки через `ref`.

---

## Відмінності

| Критерій | Controlled | Uncontrolled |
|---|---|---|
| Де зберігається значення | У React `state` | Усередині DOM |
| Як змінюється значення | Через `onChange` і `setState` | Користувач вводить напряму |
| Коли оновлюється UI | При зміні `state` | React не контролює |
| Двостороннє зв'язування | Так | Ні |
| Тестованість | Висока | Низька |
| Використання у формах | Рекомендується | Тільки для простих випадків |

---

## Чому контрольовані компоненти важливі

1. **React повністю керує станом** -> UI завжди синхронізований.
2. **Можна валідувати дані при кожному введенні.**
3. **Можна скидати, змінювати, автозаповнювати значення** програмно.
4. **Єдине джерело істини** - значення поля = стан React.

---

## Приклад використання у формі

```javascript
function LoginForm() {
  const [form, setForm] = useState({ email: '', password: '' });

function handleChange(e) {
    setForm({ ...form, [e.target.name]: e.target.value });
  }

function handleSubmit(e) {
    e.preventDefault();
    console.log(form); // використовуємо дані зі state
  }

return (
    <form onSubmit={handleSubmit}>
      <input
        name="email"
        value={form.email}
        onChange={handleChange}
      />
      <input
        name="password"
        type="password"
        value={form.password}
        onChange={handleChange}
      />
      <button type="submit">Увійти</button>
    </form>
  );
}
```

> Тут обидва `<input>` повністю **контролюються станом** `form` -
> React знає кожну зміну в реальному часі.

---

## Підсумок

| Що це | Компонент, значення якого зберігається в React state |
|---|---|
| Де зберігається стан | У React, а не в DOM |
| Як оновлюється | Через `onChange` -> `setState` |
| Приклад | `<input value={name} onChange={...} />` |
| Переваги | Передбачуваність, валідація, "єдине джерело істини" |
| Аналогія | "React тримає кермо, а не DOM" |

---

> **Головна думка:**
> Контрольований компонент - це той,
> у якого **React керує значенням**.
>
> UI просто відображає поточний стан, а не зберігає його сам.

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

Для рев’юера

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

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