15. Concurrent Mode: Time Slicing, Priority Lanes & Scheduler Internals • React.js 18+ Architecture: Core Fiber to Enterprise Scale • Rishabh Ki Kaksha

Purana React single-task worker tha — ek baar render shuru kiya toh jab tak poora khatam na ho, browser freeze rehta tha.  
**Concurrent React 18 ek Multi-Tasking Operating System ki tarah hai:**
*   Ye ek sath multiple versions of UI calculate kar sakta hai.
*   Ye **Low-Priority work (Background data rendering)** ko beech me rokk kar **High-Priority work (User typing keystroke)** ko pehle serve karta hai!

---

### 2. React 18 31-Priority Lanes Architecture 🏎️

React 18 binary bitmasks use karta hai jinhe **Lanes** kehte hain:

```javascript
// React 18 Bitmask Priority Lanes:
const SyncLane               = 0b0000000000000000000000000000001; // Discrete user input (Click, Keydown)
const InputContinuousLane    = 0b0000000000000000000000000000100; // Continuous events (Scroll, Drag, MouseMove)
const DefaultLane            = 0b0000000000000000000000100000000; // Standard setState / network response
const TransitionLane         = 0b0000000000000010000000000000000; // startTransition()
const IdleLane               = 0b0100000000000000000000000000000; // Offscreen pre-rendering
```

---

### 3. The React Scheduler (MessageChannel Cooperative Loop)

Browser ka native `setTimeout` kam se kam 4ms lagata hai aur `requestIdleCallback` battery save mode me bohot slow hota hai.  
Isliye React Scheduler **`MessageChannel` Web API** use karta hai jo microtask-speed macro-task schedule karta hai:

```javascript
// React Scheduler loop:
function workLoop(hasTimeRemaining, initialTime) {
    let currentTime = initialTime;
    currentTask = peek(taskQueue);

while (currentTask !== null) {
        if (currentTask.expirationTime > currentTime && (!hasTimeRemaining || shouldYieldToHost())) {
            // Frame budget (~5ms) exceeded -> Give control back to browser!
            break;
        }
        const callback = currentTask.callback;
        callback();
        currentTask = peek(taskQueue);
    }
}
```

---

### 4. Master Comparison Matrix

---

### 5. Interview Ke 3 Sawal Is Topic Se

1. **Concurrent Mode me Lane Bitmasks ka kya fayda hai?** -> Bitwise operations (`&`, `|`, `~`) CPU register level par nanoseconds me execute hote hain, jisse multiple prioritized updates ko instantly combine ya filter kiya ja sakta hai.
2. **`shouldYieldToHost()` function kab `true` return karta hai?** -> Jab current render chunk 5ms ka frame time budget cross kar leta hai ya user ka high-priority input event browser queue me wait kar raha hota hai.
3. **Concurrent React activate kaise hota hai?** -> `ReactDOM.createRoot(root).render(<App />)` likhne se modern concurrent features auto-enable ho jaate hain.

---
**Next Topic:** 16. useTransition & useDeferredValue: Non-Blocking UI Transitions

Loading lesson content...

React JSX

Full IDE

Live Execution Terminal

Click "Execute Live" to run code.
                

Lesson Mastery AI Quiz

AI Doubt Solver

CERTIFICATE OF COMPLETION

Rishabh Gehlot

PHP 8+ & Laravel 11 Master Track