Что такое Fiber в React

В коротком ответе держитесь простой формулы. Fiber это не библиотека и не public API. Это способ, которым React внутри хранит и выполняет работу по обновлению UI.

До Fiber React в основном проходил дерево компонентов синхронно, почти как стек вызовов. Если дерево большое, такая работа могла надолго занять main thread. Пользователь вводит текст, двигает мышь или скроллит, а браузеру сложнее быстро ответить, потому что JavaScript занят рендером.

Fiber заменил эту модель на структуру, где каждый узел дерева связан с единицей работы. React может выполнить часть работы, уступить управление браузеру, позже вернуться к задаче или выбросить незавершенный результат, если пришло более важное обновление.

Хороший ответ не обязан уходить в детали исходников React. Вам важно показать три вещи: какую проблему решает Fiber, как он меняет работу React и где это видно в обычном frontend-коде.

Самая частая ловушка в этом вопросе такая: сказать, что React теперь всегда рендерит асинхронно и ничего не блокирует. Лучше сразу разделить две фазы.

Render phase это расчет следующего дерева UI. В этой фазе React может работать с work-in-progress Fiber tree, расставлять приоритеты, повторять работу и выбрасывать незавершенный результат. Поэтому render phase должна быть чистой. Не запускайте там запросы, подписки, ручные DOM-изменения и другие внешние эффекты. Иначе легко получить лишний сетевой вызов, race condition, утечку подписки или аналитику события, которого пользователь так и не увидел.

Commit phase это момент, когда React применяет изменения к DOM и запускает часть эффектов. Этот этап нельзя растянуть без последствий для UX. Если вы делаете много синхронной работы в useLayoutEffect или постоянно измеряете layout, пользователь все равно увидит задержку.

Fiber полезно связывать с реальными API React, но без магии. Например, при вводе в поле поиска можно оставить сам ввод срочным, а тяжелое обновление списка сделать менее срочным. В примере ниже обратите внимание на доступность поля и на то, что фильтр не пересчитывается при каждом срочном рендере.

import { startTransition, useMemo, useState } from "react";

function SearchPage({ allItems }) {
  const [query, setQuery] = useState("");
  const [visibleQuery, setVisibleQuery] = useState("");

  function handleChange(event) {
    const nextQuery = event.target.value;
    setQuery(nextQuery);

    startTransition(() => {
      setVisibleQuery(nextQuery);
    });
  }

  const items = useMemo(
    () => allItems.filter((item) => item.title.includes(visibleQuery)),
    [allItems, visibleQuery],
  );

  return (
    <>
      <label htmlFor="search">Поиск</label>
      <input id="search" type="search" value={query} onChange={handleChange} />
      <Results items={items} />
    </>
  );
}

Здесь срочное обновление query помогает полю оставаться отзывчивым, а обновление результатов может быть менее приоритетным. useMemo нужен, чтобы срочный рендер поля не пересчитывал фильтр с тем же visibleQuery. label нужен, чтобы поиск был доступен с клавиатуры и скринридера.

Но если allItems.filter очень дорогой или Results рисует тысячи элементов без virtualization, Fiber не отменит эту стоимость. Пользователь все равно увидит задержку ввода, лаг скролла или долгую отрисовку результатов. Тогда нужны мемоизация, виртуализация списка, серверная фильтрация, Web Worker или вынос тяжелого расчета из срочного пути.

На собеседовании хорошо звучит практический вывод. Fiber нужен не для того, чтобы вы напрямую управляли внутренним деревом. Он нужен, чтобы React мог безопаснее управлять временем выполнения обновлений.

Это важно для интерфейсов, где есть конкуренция между срочными и несрочными действиями. Ввод, клик и анимация должны получать приоритет над большим перерендером списка. Suspense должен иметь возможность показать fallback вместо сломанного пустого экрана. Lazy component должен загрузиться без ручного контроля всех промежуточных состояний.

Если вас прямо спрашивают про отличие, отвечайте коротко. Virtual DOM это модель UI в памяти, то есть то, что React хочет получить на экране. Fiber это внутренняя структура работы React с этим деревом: как пройти по нему, где остановиться, какой update важнее и что можно переиспользовать.

Простая аналогия для ответа: Virtual DOM описывает результат, Fiber помогает организовать путь к этому результату. Не говорите, что Fiber заменил Virtual DOM. Корректнее сказать, что Fiber изменил архитектуру reconciler и представление работы над деревом.