Suggest an editImprove this articleRefine the answer for “What is Fiber in the context of React 18?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**React Fiber** is the **new architecture of React's internal core**, introduced in React 16 (and refined in React 18), responsible for **coordinating rendering** and **managing updates** in the component tree. **Key point:** Fiber lets React break work into small tasks, pause and resume rendering, and prioritize updates, which is what makes Concurrent Rendering possible.Shown above the full answer for quick recall.Answer (EN)Image## 1. What React Fiber is - a simple definition **React Fiber** is the **new architecture of React's internal core**, introduced in React 16 (and refined in React 18), responsible for **coordinating rendering** and **managing updates** in the component tree. Where React used to simply walk the tree recursively and render everything synchronously at once, Fiber lets React: - **split work into small tasks**, - **pause, resume, and cancel** rendering, - **prioritize** updates (including asynchronous ones), - and **enable Concurrent Rendering** (implemented in React 18). --- ## 2. Why Fiber came about in the first place Before React 16, React used the **Stack Reconciler**: it worked recursively and synchronously. The problem: if the tree was large, React "froze" during rendering - until the whole tree finished rendering, the browser could not handle events, animations, and so on. React Fiber solves this by turning rendering into a **step-by-step, controllable cycle** that can be paused and resumed. --- ## 3. What a "fiber" actually is Every React element (a component, a DOM node, a hook, and so on) is represented in memory as a **Fiber object** - a small structure describing one "cell" of the tree. Roughly like this (simplified): ```javascript { type: MyComponent, // a reference to the component function/class stateNode: DOMElement, // the real DOM node or instance child: Fiber, // the first child fiber sibling: Fiber, // the next sibling return: Fiber, // the parent pendingProps: {...}, // the new props memoizedProps: {...}, // the old props alternate: Fiber, // a reference to the previous version (for diffing) lanes: 1, // priority / lane } ``` So the whole React tree is a linked structure of **Fiber nodes**. --- ## 4. How rendering works with Fiber Rendering in React 18 goes through two phases: ### 1. **Render phase** (building the new Fiber tree) - React builds the new Fiber tree (virtual nodes). - It computes which parts need updating. - This phase **can be interrupted** (in Concurrent Mode). ### 2. **Commit phase** (applying to the DOM) - React applies the changes to the real DOM. - This step is **always synchronous** (atomic). Fiber is what makes the first phase "asynchronous" and **interruptible**. --- ## 5. Priorities and Concurrent Rendering (React 18) React 18 added the **Lanes** system, which manages the priorities of Fiber tasks. Now React can: - Update user input immediately (`useTransition`, `useDeferredValue`), - Defer a lower-priority render (for example, lists or animations), - Resume an interrupted render without re-rendering the whole tree. Concurrent Rendering = React's ability to **prepare parts of the interface asynchronously**, without blocking the main UI thread. Fiber is exactly what makes this possible. --- ## 6. An example of Fiber's "magic" in React 18 Say you have an input field with autosuggestions: ```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 let React: - handle the input (`setQuery`) immediately (high priority), - defer the heavy filtering (`setResults`) and run it asynchronously, - interrupt the filtering if needed, if the user types again. Without Fiber, React would do all of this synchronously → lag and a "frozen" interface. --- ## 7. Fiber and the double tree (Current / Work In Progress) React keeps **two Fiber trees**: - `current` - the currently displayed tree; - `workInProgress` - the new tree React builds while rendering. After the render phase finishes, React **swaps them** during the commit phase. This is how an **instant and safe** UI update is achieved. --- ## 8. What changed in React 18 | System component | What was added / improved | |---|---| | Fiber architecture | Refined for asynchronous scheduling | | Scheduler | A new task scheduler with priorities (Lanes) | | Streaming SSR | Uses Fiber for asynchronous rendering on the server | | Transitions API | Implemented on top of Fiber priorities | | Suspense on the server | Support for "suspending" components through Fiber mechanics | --- ## Summary **React Fiber is the "brain" and "nervous system" of the React renderer.** | What Fiber does | Why | |---|---| | Splits rendering into small parts | To avoid blocking the UI | | Pauses and resumes work | For Concurrent Rendering | | Assigns priorities to updates | So important actions happen sooner | | Keeps a history of the previous state | For efficient diffing and rollback | | Manages the commit phase | So the DOM updates safely and synchronously | > In simpler terms: > Fiber is the "React runtime" that makes asynchronous, prioritized, smooth rendering possible, > and it is the foundation for all of React 18's modern features - from Concurrent Mode to Streaming SSR.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.