🚀 Understanding React Fiber: Incremental vs Concurrent Rendering
React Fiber introduced a new way to handle rendering in React, allowing work to be split into small chunks (slices), paused, resumed, and even discarded. But how does this affect what the browser actually sees? Let’s break it down.
🧩 1. Work-in-Progress (WIP) and Slices
- Each Fiber node is a unit of work.
- Rendering is divided into time slices.
- In each slice, React processes as many Fibers as it can before yielding back to the browser.
👉 Important: Slices are only about preparing work. They do not directly affect the DOM.
🛑 2. Pausing vs Discarding
- Pausing → If React runs out of time, it saves progress and continues in the next slice.
- Discarding → If a new higher-priority update comes in, React throws away unfinished WIP and restarts.
🎨 3. When Does the Browser See Updates?
- During Render (slices) → React is only preparing the Fiber tree. ❌ No DOM updates yet.
- At Commit Phase → React flushes the finished tree to the DOM in one atomic step. ✅ Browser paints changes here.
👉 Even if rendering happens in 5 slices, the browser only updates after commit.
🌀 4. Why Is It Still Called Incremental Rendering?
- React doesn’t block the browser with a long, synchronous render.
- Rendering work is split across slices.
- Browser stays responsive in between.
🔑 The incremental part is about time-slicing the render work, not about incremental DOM commits.
🔄 5. Example Walkthrough
Imagine typing into an input that triggers a huge list render.
Without Fiber (old stack reconciler)
- Input change → whole list renders synchronously.
- Browser frozen until work completes.
With Fiber (incremental rendering)
- Slice 1: Input Fiber processed.
- Yield → browser stays responsive.
- Slice 2–5: List Fibers processed gradually.
- Final slice → Commit happens, DOM updated.
⚡️ 6. Concurrent Rendering
Concurrent rendering builds on incremental rendering by allowing partial commits.
- Commit input immediately → user sees instant feedback.
- Render list in background.
- If user types again → discard old WIP and restart fresh.
✅ This makes UI feel even smoother.
Top comments (0)