17. Suspense for Data Fetching, Error Boundaries & Streaming SSR Architecture • React.js 18+ Architecture: Core Fiber to Enterprise Scale • Rishabh Ki Kaksha

Pehle loading states ke liye har component me `if (loading) return <Spinner />` likhna padta tha.  
**Suspense** me component data na hone par ek **Promise Throw** karta hai — React use catch karke parent `<Suspense fallback={<Skeleton />}>` render karta hai!

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

function UserProfile() {
    return (
        <Suspense fallback={<SkeletonProfile />}>
            <AsyncUserCard />
        </Suspense>
    );
}
```

---

### 2. Error Boundaries (The Crash Helmet 🪖)

React me agar 1 child component crash ho jaye, toh poori React app white screen ho jaati hai.  
**Error Boundary** crash ko catch karke sundar fallback UI dikhata hai:

```jsx
import React from "react";

class ErrorBoundary extends React.Component {
    state = { hasError: false, error: null };

static getDerivedStateFromError(error) {
        return { hasError: true, error };
    }

componentDidCatch(error, errorInfo) {
        // Send error to Sentry / Datadog
        console.error("Crash logged:", error, errorInfo);
    }

render() {
        if (this.state.hasError) {
            return <h2>Something went wrong. <button onClick={() => this.setState({ hasError: false })}>Retry</button></h2>;
        }
        return this.props.children;
    }
}
```

---

### 3. Streaming SSR with `renderToPipeableStream` 🌊

Legacy SSR me server poora HTML string generate hone tak wait karta tha (All-or-Nothing).  
React 18 me **Streaming SSR** HTML ko chunks me browser ko bhejta hai:

```
[ Fast Header/Nav HTML ] ➔ Streams to Browser (Instantly Visible)
           ⬇
[ Heavy Database Feed ]  ➔ Streams <template> + Auto-replaces Skeleton via inline script!
```

---

### 4. Selective Hydration ⚡

Browser par JavaScript load hone par poora page ek sath freeze nahi hota:
*   User jis component par pehle click karta hai, React **sabse pehle usi specific component ko prioritize karke hydrate karta hai!**

---

### 5. Master Comparison Matrix

---

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

1. **Error Boundaries functional components me hooks se kyu nahi ban sakte?** -> Kyunki React me abhi tak `componentDidCatch` aur `getDerivedStateFromError` ka koi equivalent hook release nahi hua hai (Isliye `react-error-boundary` library standard mani jaati hai).
2. **Suspense internally promise ko kaise intercept karta hai?** -> Component render ke waqt pending Promise ko `throw` karta hai; React Fiber tree me upar bubble hote huye nearest Suspense boundary use catch kar leti hai.
3. **Selective Hydration me user interaction ka kya role hota hai?** -> Agar user kisi un-hydrated comment box par click kare, toh React ongoing background hydration ko suspend karke us comment box ko pehle interactive banata hai.

---
**Next Topic:** 18. Server State Caching: TanStack Query (React Query) Architecture & Optimistic Updates

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