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

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

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

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

Контент

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

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

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

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

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

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

**Reconciliation (узгодження)** - це **процес порівняння старого і нового дерева Virtual DOM**,
у ході якого React визначає, **які саме зміни потрібно внести в реальний DOM**,
щоб інтерфейс відповідав актуальному стану даних.

---

### Як це працює (покроково)

1. **Ти змінюєш стан (state або props):**

```javascript
  setCount(count + 1);
  ```
2. React викликає повторний рендер компонента ->
створюється **нове дерево Virtual DOM**.
3. React порівнює **нове** і **старе** дерево Virtual DOM:
  - Якщо вузол того самого типу (`<div>` -> `<div>`), він **зберігає DOM-елемент** і оновлює лише змінені атрибути.
  - Якщо тип змінився (`<div>` -> `<span>`), React **видаляє старий вузол і створює новий**.
  - Якщо порядок елементів змінився (наприклад, у списку), React використовує **ключі (**`key`**)**, щоб зрозуміти, який елемент перемістився, а який додано/видалено.
4. Після порівняння React **вносить мінімальні зміни** в реальний DOM.

---

### Приклад

#### Було:

```javascript
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>
```

#### Стало:

```javascript
<ul>
  <li>A</li>
  <li>C</li>
  <li>D</li>
</ul>
```

React робить:

1. Порівнює обидва дерева Virtual DOM.
2. Бачить, що:
  - `A` залишився на місці
  - `B` зник
  - `C` перемістився вгору
  - `D` додався
3. Оновлює **лише необхідні частини** DOM, без повної перемальовки.

---

### Алгоритм reconciliation

React використовує **оптимізований "diffing algorithm"**, заснований на кількох евристиках:

1. **Різні типи елементів -> перерендер вузла**

```javascript
  <div> -> <span> // замінюється повністю
  ```
2. **Однакові типи -> оновлення властивостей**

```javascript
  <button disabled={false}> -> <button disabled={true}>
  // React просто змінить атрибут
  ```
3. **Списки і** `key`
Ключ допомагає React відрізняти елементи між рендерами:

```javascript
  {items.map(item => <li key={item.id}>{item.text}</li>)}
  ```
Без `key` React може помилково видаляти і створювати елементи заново,
втрачаючи фокус, анімації і стан.

---

### Навіщо потрібен reconciliation

Без цього процесу React не знав би, *що саме* потрібно змінити,
і просто перемальовував би все дерево заново -> повільно й неефективно.

За допомогою reconciliation React:

- працює **швидко** (мінімум змін у DOM),
- залишається **декларативним** (ти описуєш "що", не думаючи "як"),
- **зберігає стани** компонентів при часткових оновленнях.

---

### Візуальна аналогія

Уяви, що React - це текстовий редактор:

- У тебе є стара версія документа (старий Virtual DOM);
- Ти вносиш правки (новий Virtual DOM);
- React порівнює дві версії і **вносить лише відмінності**,
замість того щоб передруковувати весь текст.

---

### Підсумок

| Термін | Що означає |
|---|---|
| **Virtual DOM** | Копія реального DOM у пам'яті |
| **Diffing** | Порівняння старого і нового Virtual DOM |
| **Reconciliation** | Застосування різниці до реального DOM |
| **Key** | Підказка React, який елемент відповідає якому під час порівняння |

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

Для рев’юера

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

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