Що таке рендеринг (rendering) в React?

ReactJunior~2 хв читання

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

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

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

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

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

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

Render phase (фаза обчислення / підготовки) React викликає компоненти, створює нове віртуальне дерево, порівнює його зі старим і вирішує, що потрібно оновити. Ця фаза може бути перервана (у concurrent rendering).
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.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Що таке рендеринг (rendering) в React?

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

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

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

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

#Важливо:

#Приклад: