Що таке Fiber у контексті React 18?

ReactMiddle~3 хв читання

1. Що таке React Fiber - просте визначення

React Fiber - це нова архітектура внутрішнього ядра React, введена з React 16 (і вдосконалена в React 18), яка відповідає за координацію рендерингу і керування оновленнями в дереві компонентів.

Якщо раніше React просто рекурсивно обходив дерево і синхронно рендерив усе одразу, то Fiber дозволяє React:

розбивати роботу на дрібні задачі,
призупиняти, відновлювати і скасовувати рендер,
розподіляти пріоритети оновлень (у тому числі асинхронних),
і вбудовувати Concurrent Rendering (реалізований у React 18).

2. Чому Fiber взагалі з'явився

До React 16 React використовував Stack Reconciler: він працював рекурсивно і синхронно.

Проблема: Якщо дерево було великим, React "зависав" на рендерингу - поки все дерево не відрендериться, браузер не міг обробляти події, анімації тощо.

React Fiber вирішує це, перетворюючи рендер на покроковий, керований цикл, який можна призупинити і відновити.

3. Що являє собою "файбер"

Кожен елемент React (компонент, DOM-вузол, хук тощо) представлений у пам'яті об'єктом Fiber - маленькою структурою, що описує "клітинку" дерева.

Приблизно так (спрощено):

javascript

{
  type: MyComponent,      // посилання на функцію/клас компонента
  stateNode: DOMElement,  // реальний DOM або інстанс
  child: Fiber,           // перший дочірній fiber
  sibling: Fiber,         // наступний брат
  return: Fiber,          // батько
  pendingProps: {...},    // нові пропси
  memoizedProps: {...},   // старі пропси
  alternate: Fiber,       // посилання на стару версію (для diff)
  lanes: 1,               // пріоритет / lane
}

Таким чином, усе React-дерево - це зв'язана структура Fiber-вузлів.

4. Як працює рендеринг з Fiber

Рендеринг у React 18 проходить у два етапи:

1. Render phase (створення нового дерева Fiber)

React будує нове дерево Fiber (віртуальні вузли).
Обчислює, які частини потрібно оновити.
Ця фаза може бути перервана (у Concurrent Mode).

2. Commit phase (застосування до DOM)

React застосовує зміни до реального DOM.
Цей крок завжди синхронний (атомарний).

Fiber робить першу фазу "асинхронною" і переривною.

5. Пріоритети і Concurrent Rendering (React 18)

React 18 додав систему Lanes ("доріжок"), яка керує пріоритетами Fiber-задач. Тепер React може:

Оновити введення користувача одразу (useTransition, useDeferredValue),
Відкласти менш пріоритетний рендер (наприклад, списки або анімації),
Відновити перерваний рендер без перемальовування всього дерева.

Concurrent Rendering = можливість React асинхронно готувати частини інтерфейсу, не блокуючи основний потік UI. Саме Fiber робить це можливим.

6. Приклад "магії" Fiber у React 18

Припустимо, у тебе є поле вводу з автопідказками:

javascript

function SearchBox() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  const [isPending, startTransition] = useTransition();

  function handleChange(e) {
    const value = e.target.value;
    setQuery(value);
    startTransition(() => {
      setResults(filterBigList(value));
    });
  }

  return (
    <>
      <input value={query} onChange={handleChange} />
      {isPending ? <Spinner /> : <Results list={results} />}
    </>
  );
}

Fiber + Lanes дозволяють React:

обробити введення (setQuery) негайно (високий пріоритет),
відкласти важку фільтрацію (setResults) і виконати її асинхронно,
за потреби - перервати фільтрацію, якщо користувач знову ввів текст.

Без Fiber React робив би все синхронно → лаги і "фриз" інтерфейсу.

7. Fiber і подвійне дерево (Current / Work In Progress)

React зберігає два дерева Fiber:

current - поточне відображуване дерево;
workInProgress - нове дерево, яке React будує під час рендерингу.

Після завершення render-фази React міняє їх місцями ("swap") у commit-фазі.

Так реалізується миттєвий і безпечний апдейт UI.

8. Що змінилося в React 18

Компонент системи	Що додано / покращено
Fiber-архітектура	Допрацьована під асинхронне планування
Scheduler	Новий планувальник задач з пріоритетами (Lanes)
Streaming SSR	Використовує Fiber для асинхронного рендера на сервері
Transitions API	Реалізовані поверх пріоритетів Fiber
Suspense на сервері	Підтримка "призупинення" компонентів через Fiber-механіку

Підсумок

React Fiber - це "мозок" і "нервова система" React-рендерера.

Що робить Fiber	Навіщо
Розбиває рендер на дрібні частини	Щоб не блокувати UI
Призупиняє і відновлює роботу	Для Concurrent Rendering
Призначає пріоритети оновленням	Щоб важливі дії виконувалися раніше
Зберігає історію попереднього стану	Для ефективного diff і rollback
Керує commit-фазою	Щоб DOM оновлювався безпечно і синхронно

Простіше кажучи: Fiber - це "React runtime", який робить можливим асинхронний, пріоритетний і плавний рендеринг, на якому побудовані всі сучасні фічі React 18 - від Concurrent Mode до Streaming SSR.

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

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

Premium

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