Suggest an editImprove this articleRefine the answer for “What does Fiber Architecture do in the context of the lifecycle?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**React Fiber** is a new implementation of React's internal mechanism that is responsible for **how and when** component rendering happens. **Key point:** Fiber is React's "new engine", which manages calling components, updating the Virtual DOM, scheduling work, and running lifecycle methods.Shown above the full answer for quick recall.Answer (EN)Image## What React Fiber is > **React Fiber** is *a new implementation of React's internal mechanism* > that is responsible for **how and when** component rendering happens. In other words: **Fiber is React's "new engine"**, which manages the entire process: - calling components, - updating the Virtual DOM, - scheduling work, - and running lifecycle methods (`componentDidMount`, `useEffect`, and so on). React moved to Fiber starting with **React 16**, to make rendering **stepwise, pausable, and priority-driven**. --- ## Before Fiber (React 15 and earlier) - React had **synchronous rendering**: when an update happened, React **walked the entire tree** until it finished. - Large trees blocked the main thread → the page "froze" during rendering. - All lifecycle methods (`componentWillMount`, `componentDidMount`, `componentDidUpdate`) were called **all at once**, with no way to optimize priority. --- ## After Fiber (React 16+) Fiber turned React into a **cooperative task scheduler**. Rendering is now a **staged, priority-driven process**, where React can: - Split work into small chunks (fiber nodes) - Pause and resume rendering - Interrupt less important work (for example, an animation or user input takes priority) - Precisely control when lifecycle methods run --- ## What a Fiber Node is Every component (function, class, or host element) is represented by an internal object - a **Fiber**. A Fiber is a node in a linked list that stores: - a reference to the **component type** (`function`, `class`, `div`, and so on), - the **current state** and **props**, - **references to its parent, children, and siblings**, - information about the **priority** of the work (in which order to run it), - **effects** (what needs to be done in the commit phase). This lets React know exactly **where it stopped**, if it needs to interrupt work and then resume it. --- ## How Fiber Architecture relates to the lifecycle ### React now splits the lifecycle into 2 phases: | Phase | What it does | Methods it calls | | --- | --- | --- | | **Render phase** | Computes *what needs to change* | `shouldComponentUpdate`, `render` | | **Commit phase** | Applies the changes to the DOM | `componentDidMount`, `componentDidUpdate`, `useLayoutEffect`, `useEffect` | --- ### How Fiber implements this: 1. **Render Phase (reconciliation)** Fiber walks the tree of **Fiber nodes** and computes which changes are needed. - This phase can be **paused, resumed, or discarded**. - Here React can "split" the work and schedule it by priority. - For example, the user clicked → React may defer rendering less important parts of the UI. The following are called: - `shouldComponentUpdate` - `render()` (for classes) - the body of function components **The DOM is not updated yet** during this phase. --- 2. **Commit Phase (applying changes)** Once Fiber finishes the calculations, it **commits** the changes: - updates the DOM, - calls the post-render hooks. The following are called: - `componentDidMount` - `componentDidUpdate` - `componentWillUnmount` - `useLayoutEffect` - `useEffect` This phase is **always synchronous** - React cannot interrupt it. --- ### An example, visually ```javascript Fiber: start of Render Phase ↓ analyzing changes → diff Virtual DOM ↓ can be interrupted or paused ↓ Fiber: Commit Phase ↓ DOM update + lifecycle calls ``` --- ## Why Fiber matters for the lifecycle | Before Fiber | After Fiber | | --- | --- | | All components updated one after another, with no stopping | Rendering can be paused and resumed | | Methods were called strictly in sequence | Methods run at different priorities | | React did not understand priorities | React knows which updates matter more | | Rendering blocked the UI | The UI stays responsive during rendering | --- ## Example: how this affects effects ```javascript useEffect(() => { console.log('effect'); return () => console.log('cleanup'); }, [value]); ``` - In the **render phase** React calls the component and decides whether an update is needed. - In the **commit phase** React applies the changes and calls `useEffect`. - If the update is deferred (low priority), the effect does not fire until React reaches commit. - Fiber makes sure that **cleanup** is always called strictly before a new effect. --- ## Concurrent Rendering (React 18+) Thanks to Fiber, React now supports **concurrent rendering**: - parts of the UI can be rendered "in the background"; - the user does not see "freezes"; - lifecycle methods are called **only once the changes are committed**. --- ## Summary > **Fiber Architecture** is the mechanism that made React "smart": > it controls the **timing, priority, and order of lifecycle execution**. | Phase | What it does | Methods | | --- | --- | --- | | Render phase | Computes changes (can be paused) | `render`, `shouldComponentUpdate`, the function component's body | | Commit phase | Applies changes (always synchronous) | `componentDidMount`, `componentDidUpdate`, `useEffect`, `cleanup` |For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.