16. useTransition & useDeferredValue: Non-Blocking UI Transitions • React.js 18+ Architecture: Core Fiber to Enterprise Scale • Rishabh Ki Kaksha

React me do tarah ke updates hote hain:
*   **Urgent Updates:** Typing in an input, clicking a button, dragging a slider (User expects instant 0ms feedback).
*   **Transition Updates:** Switching tabs, filtering a table of 10,000 items, rendering heavy charts (User expects thoda wait normal hai).

---

### 2. `useTransition` Hook (The Smooth Typing Pattern ⚡)

```jsx
import { useState, useTransition } from "react";

function ProductSearch() {
    const [input, setInput] = useState("");
    const [list, setList] = useState([]);
    const [isPending, startTransition] = useTransition();

const handleChange = (e) => {
        const val = e.target.value;
        // 1. URGENT: Input text immediately update karo!
        setInput(val);

// 2. NON-BLOCKING TRANSITION: Heavy list filtering background me schedule karo!
        startTransition(() => {
            const filtered = heavyFilter(val); // 20,000 items calculation
            setList(filtered);
        });
    };

return (
        <div>
            <input value={input} onChange={handleChange} />
            {isPending && <div className="spinner">Updating list...</div>}
            <div style={{ opacity: isPending ? 0.7 : 1 }}>
                <ProductList items={list} />
            </div>
        </div>
    );
}
```

---

### 3. `useDeferredValue` (Deferring Slow Child Props)

Jab state parent ke haath me na ho (jaise props se aa rahi ho):

```jsx
import { useDeferredValue } from "react";

function SearchResults({ query }) {
    // query turant aati hai, par deferredQuery tab update hogi jab main thread free hoga
    const deferredQuery = useDeferredValue(query);

return (
        <div style={{ opacity: query !== deferredQuery ? 0.5 : 1 }}>
            <HeavyList query={deferredQuery} />
        </div>
    );
}
```

---

### 4. Debounce vs `useTransition`: The Big Tech Interview Difference 💡

*   **Debounce (setTimeout delay):** User typing rokne ke baad 300ms artificially intezaar karwata hai (Chahe fast PC ho).
*   **`useTransition` (Hardware-Adaptive):** Super-fast Mac M3 par instant 0ms me list filter ho jayegi; slow Android phone par bina UI freeze kiye frame-by-frame smoothly render hogi!

---

### 5. Master Comparison Matrix

---

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

1. **`useTransition` aur `useDeferredValue` me kya primary architectural difference hai?** -> `useTransition` state setter function (`setState`) ko wrap karta hai; `useDeferredValue` kisi already generated raw value/prop ko wrap karta hai.
2. **`startTransition` ke andar async `await` likh sakte hain kya?** -> Nahi! `startTransition` ke andar ka function synchronous hona chahiye jisme sirf state setter calls execute hon.
3. **Transition update chalne ke waqt agar user dubara type kare toh kya hota hai?** -> React running transition render ko turant discard (abort) kar deta hai aur latest keystroke par fresh transition schedule karta hai.

---
**Next Topic:** 17. Suspense for Data Fetching, Error Boundaries & Streaming SSR Architecture

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