18. Server State Caching: TanStack Query (React Query) Architecture & Optimistic Updates • React.js 18+ Architecture: Core Fiber to Enterprise Scale • Rishabh Ki Kaksha

*   **Client State:** Modal open/close, dark mode, selected tab (Synchronous, 100% owned by UI).
*   **Server State:** User profile, cart items, products (Asynchronous, DB owned, shared by multiple users, easily stale).

**Staff Engineer Axiom:**
> Redux me API data cache karna anti-pattern hai! API fetching, caching aur synchronizing ke liye **TanStack Query (React Query)** standard hai!

---

### 2. The SWR Lifecycle (`staleTime` vs `gcTime` ⏳)

```
Fresh Data ➔ (staleTime expired) ➔ Stale Data (Shown from Cache) ➔ Background Refetch ➔ Silent Cache Update
```

*   **`staleTime`:** Data kitni der tak "taza" hai (Default: `0ms`). Jab tak data fresh hai, koi network request nahi jayegi.
*   **`gcTime` (Garbage Collection Time):** Inactive data kitni der tak RAM cache me bacha rahega (Default: `5 mins`).

```javascript
const { data, isLoading } = useQuery({
    queryKey: ["user", userId],
    queryFn: () => fetchUser(userId),
    staleTime: 1000 * 60 * 5, // 5 minutes fresh!
    gcTime: 1000 * 60 * 30    // 30 minutes in RAM
});
```

---

### 3. Optimistic Updates (Zero-Latency UI 🚀)

Instagram like button ya Twitter retweet ki tarah — **server confirmation ka wait kiye bina UI ko instantly update karna!**

```typescript
const queryClient = useQueryClient();

const mutation = useMutation({
    mutationFn: toggleLikeApi,
    // Step 1: Before network call, optimistically update UI:
    onMutate: async (postId) => {
        await queryClient.cancelQueries({ queryKey: ["post", postId] });
        const previousPost = queryClient.getQueryData(["post", postId]);

// Optimistically increment likes:
        queryClient.setQueryData(["post", postId], (old: any) => ({
            ...old,
            likes: old.likes + 1,
            isLiked: true
        }));

return { previousPost }; // Snapshot for rollback!
    },
    // Step 2: If server fails, automatically ROLLBACK:
    onError: (err, postId, context) => {
        queryClient.setQueryData(["post", postId], context?.previousPost);
    },
    // Step 3: Always sync with true server state:
    onSettled: (data, error, postId) => {
        queryClient.invalidateQueries({ queryKey: ["post", postId] });
    }
});
```

---

### 4. Master Comparison Matrix

---

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

1. **`queryKey` serialization React Query me kaise kaam karti hai?** -> Query keys array format me hoti hain (`['todos', { status, page }]`); React Query internal deterministic hash function se objects ke keys ko sort karke stable cache key banata hai.
2. **`staleTime: Infinity` kab set karna chahiye?** -> Static datasets ke liye jaise country lists, fixed app configurations ya localized translation dictionaries.
3. **Request Deduplication ka kya matlab hai?** -> Agar ek hi page par 4 alag-alag components same `queryKey` ke sath mount hon, toh React Query sirf 1 network call bhejta hai aur chaaro components ko wahi single promise share kar deta hai.

---
**Next Topic:** 19. Global State Management: Zustand vs Redux Toolkit (RTK) vs Jotai Atomic State

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