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

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

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

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

Контент

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

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

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

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

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

React називають **декларативною бібліотекою**, тому що **в ній ми описуємо,** ***що має бути*** **показано користувачу, а не** ***як саме*** **це зробити**.

---

### Імперативний vs декларативний підхід

Щоб зрозуміти це, порівняємо два підходи:

#### Імперативний стиль (звичайний JavaScript)

Ти **покроково кажеш браузеру,** ***як*** **оновити інтерфейс**:

```javascript
const button = document.createElement("button");
button.textContent = "Click me";
button.addEventListener("click", () => {
  button.textContent = "Clicked!";
});
document.body.appendChild(button);
```

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

---

#### Декларативний стиль (React)

Ти **описуєш кінцевий стан інтерфейсу**, а React **сам вирішує, як його досягти**:

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

return (
    <button onClick={() => setClicked(true)}>
      {clicked ? "Clicked!" : "Click me"}
    </button>
  );
}
```

> Тут ти не торкаєшся DOM вручну.
> Ти просто кажеш: "якщо `clicked` - true, покажи текст 'Clicked!'".
> React сам порівняє старий і новий стан та оновить лише потрібну частину.

---

### Чому це зручно

- Код простіше читати й підтримувати
(ти описуєш, *що має бути*, а не *як змінити DOM*).
- Менше помилок під час роботи зі станом.
- Легше масштабувати великі інтерфейси.

---

### Аналогія

Імперативний код - це як сказати роботу:

> "Візьми ложку, набери суп, піднеси до рота, нахили, поверни ложку назад".

Декларативний код - це як сказати:

> "Погодуй мене супом".

Робот (у нашому випадку React) сам розбирається, **як саме** це зробити.

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

Для рев’юера

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

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