Chapter 32 — Real-World Funksiyalar

Bu bobda tez-tez uchraydigan real-world UI funksiyalarni: qidiruv, sahifalash, modal va bildirishnomalarni ko'ramiz.

---

32.1 Debounced Search

Example

App.jsx
React JSXNusxalash
01function SearchBox() {
02  const [query, setQuery] = useState("");
03  const debouncedQuery = useDebounce(query, 500);
04 
05  useEffect(() => {
06    if (debouncedQuery) {
07      fetch(`/api/search?q=${debouncedQuery}`);
08    }
09  }, [debouncedQuery]);
10 
11  return <input value={query} onChange={(e) => setQuery(e.target.value)} />;
12}

Problem → Architecture → Implementation

• Problem: Har harfda so'rov yuborish — serverga ortiqcha yuk beradi
• Architecture: Debounce hook + useEffect
• Implementation: Yuqoridagi kod

32.2 Modal va Toast Tizimi

Example — Toast System (Context orqali)

App.jsx
React JSXNusxalash
01const ToastContext = createContext(null);
02 
03function ToastProvider({ children }) {
04  const [toasts, setToasts] = useState([]);
05  function showToast(message) {
06    const id = Date.now();
07    setToasts((t) => [...t, { id, message }]);
08    setTimeout(() => setToasts((t) => t.filter((x) => x.id !== id)), 3000);
09  }
10  return (
11    <ToastContext.Provider value={showToast}>
12      {children}
13      <div className="toasts">
14        {toasts.map((t) => <div key={t.id}>{t.message}</div>)}
15      </div>
16    </ToastContext.Provider>
17  );
18}

Edge Cases

Bir vaqtda bir nechta toast ko'rsatilishi, toast avtomatik yo'qolishi va foydalanuvchi qo'lda yopishi mumkinligi hisobga olinishi kerak.

32.3 Pagination va Infinite Scroll

Example — Pagination

App.jsx
React JSXNusxalash
01function ProductList() {
02  const [page, setPage] = useState(1);
03  const { data } = useFetch(`/api/products?page=${page}`);
04 
05  return (
06    <>
07      <List items={data} />
08      <button onClick={() => setPage((p) => p + 1)}>Keyingi</button>
09    </>
10  );
11}

📝 Practice Exercises

🔴 Exercise 1 — Hard

Task: To'liq Toast System — success, error, info turlari bilan, avtomatik yo'qolish va qo'lda yopish imkoniyati bilan yarating.

🐛 Debugging Challenge

App.jsx
React JSXNusxalash
01function SearchBox() {
02  const [query, setQuery] = useState("");
03 
04  useEffect(() => {
05    fetch(`/api/search?q=${query}`);
06  }, [query]);
07 
08  return <input value={query} onChange={(e) => setQuery(e.target.value)} />;
09}

Your Task: Bu qidiruv har harf kiritilganda serverga so'rov yuboradi. Buni qanday optimallashtirish mumkin?

<details> <summary>Solution</summary> `useDebounce` hook qo'shish kerak: ```jsx const debouncedQuery = useDebounce(query, 500); useEffect(() => { if (debouncedQuery) fetch(`/api/search?q=${debouncedQuery}`); }, [debouncedQuery]); ``` </details>

📌 Chapter Summary

Real-world funksiyalar (qidiruv, toast, pagination) — handbookda o'rgangan asosiy tushunchalar (debounce, Context, useEffect, state)ning amaliy birlashmasidir.

🎯 Key Takeaways

• Debounce — ortiqcha so'rovlarni kamaytiradi
• Toast tizimi — Context orqali global chaqiriladigan funksiya sifatida quriladi
• Pagination — page state'ini dependency sifatida ishlatadi

⚡ Quick Cheat Sheet

App.jsx
React JSXNusxalash
01const debounced = useDebounce(value, 500);
02const showToast = useContext(ToastContext);
03const [page, setPage] = useState(1);

---