Suggest an editImprove this articleRefine the answer for “What is "Fiber architecture"?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**Fiber architecture** is React's internal mechanism (introduced in React 16) that manages the component rendering process: it splits updates into parts, pauses and resumes rendering, and prioritizes more important tasks. **Key point:** Fiber turns rendering into a cooperative, asynchronous process that can be paused and resumed.Shown above the full answer for quick recall.Answer (EN)Image## Short answer **Fiber architecture** is an **internal mechanism of React** (introduced in React 16) that manages **the component rendering process**. It allows React to: - **split updates into parts**, - **pause and resume rendering**, - **give priority to more important tasks**, - and **keep the interface responsive even under heavy computation**. --- ## Why this was needed Before React 16, React used a **stack-based recursive architecture**: - When the component tree needed an update, React traversed the entire tree recursively, from start to finish. - If a component was heavy or the tree was large, the browser would "freeze" for a fraction of a second. This meant freezes, dropped FPS, a "janky" UI. --- ### The problem with "old React" Imagine: - You have a complex application with hundreds of components; - The user types something into an input; - React starts recalculating the entire component tree; - Until it finishes, nothing else in the browser can happen (including clicks and animations). This was synchronous and non-interruptible. --- ## What Fiber does React Fiber solves this problem by turning the rendering process into a cooperative, asynchronous one. Now React can: 1. Split an update into small units of work; 2. Execute them step by step; 3. Stop and resume if the browser needs to do something more important (for example, handle user input); 4. Assign priorities to tasks. In other words, Fiber is a mechanism for "scheduled" rendering. --- ## What "Fiber" literally is "Fiber" is an object representing a unit of work (one node of the component tree). Internally, every React component is now represented as a Fiber node, in which React stores: - a reference to the component's type (function, class, HostComponent, etc.); - its props, state, ref, return, sibling, child; - the update priority (urgent / not urgent); - and information about whether it had an error or an effect. In essence, it's a new data structure describing the render tree. --- ## How Fiber works (step by step) 1. React receives a signal that the UI needs to be updated (for example, state changed). 2. React creates a new "Fiber tree", copying the old one and updating the changed parts. 3. This tree is processed in two phases: --- ### 1. Render phase (computation phase) - React recursively builds a new Fiber tree; - calculates what has changed; - can pause or interrupt this process; - the result is a "list of changes" that need to be applied to the DOM. This phase can be interrupted and resumed (asynchronous). --- ### 2. Commit phase (application phase) - React applies the changes to the real DOM; - calls useEffect, componentDidMount, componentDidUpdate, etc. This phase is always synchronous and non-interruptible (to avoid "torn" UI states). --- ## Advantages of Fiber Architecture | Capability | What it gives | |---|---| | Splitting work into small tasks | Does not block the UI | | Pausing and resuming the render | You can animate, type, and scroll during updates | | Update priorities | Important tasks run first (for example, text input) | | Reuse of intermediate results | Improves performance | | Foundation for Concurrent Mode | Support for "smart" multi-threaded behavior (React 18+) | --- ## Fiber and Concurrent Rendering Thanks to Fiber, React 18 got Concurrent Rendering, a way to render parts of the interface asynchronously and with priorities. Examples: - startTransition() - defers unimportant updates; - useDeferredValue() - keeps the UI from "jumping" during fast input; - Suspense - deferred rendering with "placeholders". All of this became possible only because of Fiber. --- ## Visual analogy Imagine React as a painter: - Before Fiber: the painter paints the whole picture at once, without lifting their head, until it's finished. Even if you call out to them, they don't react. - With Fiber: the painter paints in parts, can stop to answer a question or make coffee, and then continues from where they left off. --- ## Summary | Parameter | Before Fiber (React ≤15) | With Fiber (React ≥16) | |---|---|---| | Render type | Synchronous | Asynchronous (cooperative) | | Can be paused | No | Yes | | Priorities | No | Yes | | UI responsiveness | Drops on large trees | Consistently high | | Foundation for Concurrent Mode | No | Yes | --- Final definition: > React Fiber is a new implementation of React's core that makes rendering step-by-step, priority-based, and interruptible, providing a smooth, responsive interface even under large updates.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.