Chapter 22 — Ma'lumot Yuklash

PART 12'da useEffect orqali fetch qilishni ko'rgan edik. Endi loading/error/success holatlari, caching va server state vs client state farqini chuqurroq ko'ramiz.

---

22.1 Loading, Error, Success Holatlari

Example

App.jsx
React JSXNusxalash
01function useFetch(url) {
02  const [state, setState] = useState({ data: null, loading: true, error: null });
03 
04  useEffect(() => {
05    let cancelled = false;
06    setState({ data: null, loading: true, error: null });
07 
08    fetch(url)
09      .then((res) => res.json())
10      .then((data) => { if (!cancelled) setState({ data, loading: false, error: null }); })
11      .catch((error) => { if (!cancelled) setState({ data: null, loading: false, error }); });
12 
13    return () => { cancelled = true; };
14  }, [url]);
15 
16  return state;
17}

22.2 Server State vs Client State

Simple Explanation

Server state — tashqi manbadan kelgan, eskirishi mumkin bo'lgan ma'lumot (masalan mahsulotlar ro'yxati). Client state — ilovaning o'z ichki holati (masalan forma qiymati).

22.3 Caching Tushunchasi

Simple Explanation

Bir xil so'rov qayta-qayta yuborilmasligi uchun, natija vaqtincha "keshda" saqlanadi.

💡 Key Idea
Maxsus kutubxonalar (React Query, SWR) — caching, qayta urinish (retry), background refetch kabi murakkab mantiqni avtomatik hal qiladi, buni qo'lda useEffect bilan qayta yozish o'rniga.

📝 Practice Exercises

🔴 Exercise 1 — Hard

Task: Qidiruv natijalarini sahifalash (pagination) bilan yuklovchi komponent yozing — loading va error holatlarini hisobga oling.

🐛 Debugging Challenge

App.jsx
React JSXNusxalash
01function ProductList() {
02  const [products, setProducts] = useState([]);
03  const [loading, setLoading] = useState(false);
04 
05  useEffect(() => {
06    fetch("/api/products").then(res => res.json()).then(setProducts);
07  }, []);
08 
09  return loading ? <Spinner /> : <List items={products} />;
10}

Your Task: loading hech qachon true bo'lmaydi, Spinner hech qachon ko'rinmaydi. Nega?

<details> <summary>Solution</summary> `setLoading(true)` va `setLoading(false)` chaqiruvlari umuman yo'q — `loading` boshlang'ich `false` qiymatida qolib ketadi. Yechim: ```jsx useEffect(() => { setLoading(true); fetch("/api/products") .then(res => res.json()) .then((data) => { setProducts(data); setLoading(false); }); }, []); ``` </details>

📌 Chapter Summary

Ma'lumot yuklashda loading, error, success holatlarini to'g'ri boshqarish muhim. Server state — client state'dan farqli, eskirishi mumkin bo'lgan tashqi ma'lumot. Caching — takroriy so'rovlarni kamaytiradi.

🎯 Key Takeaways

• Har doim loading/error/success holatlarini birga boshqaring
• Server state — maxsus e'tibor talab qiladi (React Query/SWR kabi vositalar foydali)
• Eski so'rovlar natijasi yangi so'rovni "bosib ketmasligi" uchun cleanup/cancel mexanizmi kerak

⚡ Quick Cheat Sheet

App.jsx
React JSXNusxalash
01const [state, setState] = useState({ data: null, loading: true, error: null });
02useEffect(() => {
03  let cancelled = false;
04  setState({ data: null, loading: true, error: null });
05  fetch(url).then(r => r.json())
06    .then(data => !cancelled && setState({ data, loading: false, error: null }))
07    .catch(error => !cancelled && setState({ data: null, loading: false, error }));
08  return () => { cancelled = true; };
09}, [url]);

---