Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке Fiber у контексті React 18?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**React Fiber** - це **нова архітектура внутрішнього ядра React**, введена з React 16 (і вдосконалена в React 18), яка відповідає за **координацію рендерингу** і **керування оновленнями** в дереві компонентів. **Ключове:** Fiber дозволяє React розбивати роботу на дрібні задачі, призупиняти і відновлювати рендер та розподіляти пріоритети оновлень, що робить можливим Concurrent Rendering.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення## 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.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.