Что такое Fiber в React?

React Fiber — это полный пересмотр ядра алгоритма согласования (reconciliation) в React. Он был представлен в React 16 и заменил старый стековый реконсилер, который работал синхронно и мог блокировать главный поток браузера, вызывая "подвисания" интерфейса при сложных обновлениях. Основная цель Fiber — сделать процесс рендеринга инкрементальным, прерываемым и управляемым по приоритетам.

Как работает Fiber

Fiber представляет каждую единицу работы (например, компонент) как "волокно" (fiber) — объект JavaScript, содержащий информацию о компоненте, его входных параметрах (props), состоянии (state) и связи с другими волокнами (родительскими, дочерними, соседними). Это позволяет React строить "дерево волокон", параллельное виртуальному DOM.

Ключевые возможности, которые даёт Fiber:

• Инкрементальный рендеринг: Работа разбивается на небольшие фрагменты, которые могут выполняться в течение нескольких кадров анимации (frame).
• Возможность приостановки, прерывания и повторного использования работы: React может приостановить рендеринг для обработки более приоритетных задач (например, пользовательского ввода), а затем возобновить его.
• Приоритизация обновлений: Разные типы обновлений (например, анимация vs. загрузка данных) получают разные приоритеты.
• Конкурентность: Стала основой для Concurrent React, позволяющего готовить несколько версий UI одновременно.

Практическое применение и пример

Fiber работает "под капотом", и разработчики обычно не взаимодействуют с ним напрямую. Однако его преимущества становятся видны при использовании функций, построенных на этой архитектуре, таких как useTransition, useDeferredValue или Suspense для загрузки данных.

Рассмотрим упрощённый пример, демонстрирующий, как конкурентные возможности, основанные на Fiber, позволяют сохранять отзывчивость интерфейса:

import { useState, useTransition } from 'react';

function SearchResults() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  // useTransition использует механизмы Fiber для отложенного рендеринга
  const [isPending, startTransition] = useTransition();

  function handleSearch(e) {
    const value = e.target.value;
    setQuery(value); // Обновление input — высокий приоритет, выполняется немедленно
    // Обновление результатов поиска оборачивается в переход (transition) — низкий приоритет
    startTransition(() => {
      fetchResults(value).then(data => {
        setResults(data);
      });
    });
  }

  return (
    
      
      {isPending && Загрузка...}
      
        {results.map(item => (
          {item.name}
        ))}
      
    
  );
}

// Имитация асинхронного запроса
async function fetchResults(query) {
  // ... запрос к API
  return [];
}

В этом примере обновление поля ввода (setQuery) имеет высокий приоритет и выполняется сразу, обеспечивая мгновенную реакцию. Тяжёлое обновление состояния результатов (setResults) обёрнуто в startTransition, что говорит React отложить этот рендеринг, если есть более важные задачи (например, продолжение ввода пользователем). Флаг isPending позволяет показать индикатор загрузки. Вся эта логика приоритизации стала возможной благодаря архитектуре Fiber.

Вывод

React Fiber — это фундаментальная переработка движка рендеринга, которая превратила React из синхронной библиотеки в систему, способную к инкрементальному и конкурентному обновлению интерфейса. Его стоит применять неявно, используя современные функции React (Concurrent Features), когда требуется высокая отзывчивость сложных интерфейсов, плавная анимация и эффективная обработка фоновых задач без блокировки пользовательского взаимодействия.