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

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

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

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

Контент

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

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

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

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

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

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

> **Uncontrolled Component** (неконтрольований компонент) - це компонент,
> **який зберігає свій стан (наприклад, значення поля вводу) всередині DOM**,
> а не в стані React (`useState`).

React при цьому **не керує** його значенням напряму - він просто **читає його за потреби** (через `ref` або при сабміті форми).

---

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

```javascript
function LoginForm() {
  const emailRef = useRef();
  const passwordRef = useRef();

function handleSubmit(e) {
    e.preventDefault();
    console.log({
      email: emailRef.current.value,
      password: passwordRef.current.value,
    });
  }

return (
    <form onSubmit={handleSubmit}>
      <input ref={emailRef} type="email" placeholder="Email" />
      <input ref={passwordRef} type="password" placeholder="Password" />
      <button type="submit">Log in</button>
    </form>
  );
}
```

> Тут:
>
> - `<input>` **сам зберігає** своє значення (всередині DOM);
> - React **не знає**, що вводить користувач;
> - при сабміті ми **дістаємо значення** з DOM через `ref`.

---

## Відмінність від контрольованого компонента

### Controlled Component

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

return (
    <input
      value={name}
      onChange={(e) => setName(e.target.value)} // React керує значенням
    />
  );
}
```

> React = "єдине джерело істини" (Single Source of Truth).

---

### Uncontrolled Component

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

return (
    <input ref={inputRef} /> // значення зберігається в DOM
  );
}
```

> DOM = джерело істини, React просто спостерігає.

---

## Ключові відмінності

| Критерій | Controlled | Uncontrolled |
|---|---|---|
| Де зберігається значення | У React state | Всередині DOM |
| Як оновлюється | Через `onChange` -> `setState` | Користувач вводить напряму |
| React знає поточне значення? | Так | Ні (поки не запитаємо через `ref`) |
| Управління даними | Повністю під контролем React | React "запитує" DOM за потреби |
| Валідація / маски / автозаповнення | Можна в реальному часі | Тільки при сабміті |
| Зручність при складних формах | Висока | Обмежена |
| Продуктивність | Трохи нижча (часті рендери) | Трохи вища (React не стежить за кожною зміною) |

---

## Коли використовувати Uncontrolled Components

Підходять для **простих, ізольованих форм**, де не потрібна миттєва реакція на ввід.
Наприклад:

- форма підписки з одним полем і кнопкою;
- рядок пошуку, де значення читається тільки при сабміті;
- інтеграція зі сторонніми бібліотеками, які самі керують DOM (`input[type=file]`, сторонні віджети тощо).

---

## Приклад реального використання (input type="file")

```javascript
function FileUploader() {
  const fileRef = useRef();

function handleUpload() {
    const file = fileRef.current.files[0];
    console.log(file.name);
  }

return (
    <div>
      <input type="file" ref={fileRef} /> {/* React не керує */}
      <button onClick={handleUpload}>Upload</button>
    </div>
  );
}
```

> `<input type="file" />` **завжди неконтрольований**,
> тому що React **не має доступу до файлових даних** напряму.
> Тут DOM керує значенням.

---

## Іноді можна змішувати

Іноді зручний **гібридний підхід**:

- при монтуванні задати початкове значення;
- далі не керувати ним через state.

```javascript
<input defaultValue="Hello" />  // Неконтрольований з початковими даними
```

> Атрибут `defaultValue` (або `defaultChecked`) задає стартове значення,
> але після цього React не стежить за змінами.

---

## Підсумок

| Властивість | Controlled Component | Uncontrolled Component |
|---|---|---|
| Джерело істини | React state | DOM |
| Управління вводом | React контролює | Браузер контролює |
| Читання значення | Через `state` | Через `ref` |
| Реакція на зміни | В реальному часі | Тільки за подією |
| Застосування | Складні форми, валідація, динаміка | Прості форми, інтеграції, `<input type="file">` |
| Атрибути | `value`, `onChange` | `defaultValue`, `ref` |

---

> **Головна думка:**
> Контрольований компонент - React "тримає кермо"
> Неконтрольований - "браузер сам керує", а React тільки спостерігає

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

Для рев’юера

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

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