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

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

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

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

Контент

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

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

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

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

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

**Рендеринг (rendering)** в React - це процес, при якому React **створює і оновлює дерево UI-елементів (Virtual DOM)** на основі стану (state) і властивостей (props) компонентів, а потім **синхронізує його з реальним DOM** браузера.

---

### Простіше кажучи:

Коли щось змінюється (наприклад, стан компонента), React:

1. **Викликає функцію компонента** (або `render()` у класового компонента),
щоб **отримати нове дерево JSX-елементів**.
2. **Порівнює** нове дерево з попереднім (через **алгоритм reconciliation**).
3. **Визначає відмінності (diff)** і **мінімально оновлює DOM**, щоб відобразити зміни на екрані.

---

### Два ключові етапи рендерингу:

React 18 і вище використовують архітектуру **Fiber**, у якій процес ділиться на дві фази:

1. **Render phase (фаза обчислення / підготовки)**
React викликає компоненти, створює нове віртуальне дерево, порівнює його зі старим і **вирішує, що потрібно оновити**.
Ця фаза може бути перервана (у concurrent rendering).
2. **Commit phase (фаза застосування)**
React застосовує всі знайдені зміни до **реального DOM**.
На цьому етапі викликаються хуки на кшталт `useLayoutEffect`, `useEffect`.

---

### Коли відбувається рендеринг:

Рендеринг компонента запускається, коли:

- Змінюється його **state** (`setState`, `useState`).
- Змінюються його **props** (батько передав нові дані).
- Змінюється **контекст** (`useContext`).
- Ререндериться батько (якщо дочірній компонент не мемоізований за допомогою `React.memo`).

---

### Види рендерингу:

| Тип | Що робить | Приклад |
|---|---|---|
| **Initial render** | Перше відображення компонента | під час завантаження сторінки |
| **Re-render** | Повторний рендер через оновлення стану або пропсів | при `setState()` |
| **Server-side rendering (SSR)** | Генерація HTML на сервері (Next.js, Remix) | покращує SEO |
| **Static rendering (SSG)** | Генерація HTML під час збірки | використовується в Next.js |
| **Client-side rendering (CSR)** | Генерація інтерфейсу повністю в браузері | стандартний React |

---

### Важливо:

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

---

### Приклад:

```javascript
function Counter() {
  const [count, setCount] = useState(0);

console.log('Рендеринг!');

return (
    <div>
      <p>Лічильник: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}
```

Щоразу при натисканні кнопки:

- Викликається `setCount`.
- React ререндерить компонент (`console.log` спрацьовує).
- React порівнює нове дерево з попереднім.
- Змінює лише текст `<p>Лічильник: ...>` у DOM.

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

Для рев’юера

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

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