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

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

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

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

Контент

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

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

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

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

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

### Коротко

**Декларативний підхід** - це спосіб описувати **що потрібно отримати**, а не **як це зробити**.
React побудований саме на декларативності: ти описуєш **стан інтерфейсу**, а React сам дбає про те, **як ефективно оновити** його в DOM.

---

### Приклад на контрасті

#### Імперативний підхід (Vanilla JS)

Ти сам кажеш браузеру **покроково, що робити**:

```javascript
const button = document.createElement('button');
button.textContent = 'Натисни мене';
button.addEventListener('click', () => {
  button.textContent = 'Натиснуто';
});
document.body.appendChild(button);
```

> Тут ти вручну:
>
> - створюєш елемент,
> - додаєш текст,
> - навішуєш обробник,
> - змінюєш DOM за подією.

Це імперативно: ти описуєш **як** досягти результату.

---

#### Декларативний підхід (React)

Ти описуєш **що має бути** залежно від стану:

```javascript
function Button() {
  const [clicked, setClicked] = React.useState(false);

return (
    <button onClick={() => setClicked(true)}>
      {clicked ? 'Натиснуто' : 'Натисни мене'}
    </button>
  );
}
```

> Тут ти не описуєш кроки оновлення DOM.
> Ти просто **декларуєш**, як має виглядати інтерфейс при різних станах (`clicked`).

React сам:

- відстежує зміни стану,
- перераховує віртуальний DOM,
- оновлює тільки потрібні частини реального DOM.

---

### Суть декларативності в React

| Імперативний стиль | Декларативний стиль |
|---|---|
| Опиши, **як** усе зробити | Опиши, **що** має бути |
| Керуєш DOM вручну | React сам оновлює DOM |
| Багато коду і побічних ефектів | Мінімум логіки роботи з DOM |
| Важко підтримувати складні інтерфейси | Легко розуміти і розширювати UI |

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

Для рев’юера

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

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