11.7-bob: Custom hooks (o'z hooklaringni yozish)

  MUAMMO: ikki komponent BIR XIL mantiqni ishlatadi (masalan oyna kengligini kuzatish)
   mantiqni qanday ULASHISH (komponentlar orasida)?

  ESKI YECHIM 1 — HOC (Higher-Order Component) — komponentni o'rovchi funksiya:
  const Enhanced = withWindowSize(MyComponent);   // o'rab, props sifatida beradi
   "wrapper hell": withAuth(withTheme(withData(Component))) — ichma-ich, chalkash

  ESKI YECHIM 2 — RENDER PROPS — funksiya prop orqali:
  <WindowSize>{width => <div>{width}</div>}</WindowSize>
   JSX'da ichma-ich joylashish ("pyramid of doom"), o'qish qiyin

  YANGI YECHIM — CUSTOM HOOK (oddiy funksiya):
  const width = useWindowSize();   // toza, yassi, ichma-ich emas, o'qish oson 

  ┌──────────────────────────────────────────────────────────┐
  │ HOC/render props: mantiqni ULASHISH uchun KOMPONENT qatlam│
  │ Custom hook: mantiqni ULASHISH uchun shunchaki FUNKSIYA   │
  └──────────────────────────────────────────────────────────┘

   Custom hook — "wrapper hell"siz mantiq ulashish (hooklarning asl maqsadi)

  CUSTOM HOOK — "use" bilan boshlanadigan, ichida HOOK chaqiradigan oddiy funksiya:

  function useToggle(initial = false) {        //  nom "use" bilan
    const [value, setValue] = useState(initial);   // ichida built-in hook
    const toggle = () => setValue(v => !v);
    return [value, toggle];                    // kerakli narsani qaytaradi
  }

  ISHLATISH (oddiy funksiya chaqiruvidek):
  const [isOpen, toggleOpen] = useToggle(false);

  CUSTOM HOOK = oddiy funksiya + bitta SHART: ichida hook ishlatadi
   agar ichida hook (useState/useEffect/...) bo'lmasa — bu oddiy yordamchi funksiya (use kerak emas)

  ┌──────────────────────────────────────────────────────────┐
  │ Oddiy funksiya: hisob qiladi (formatDate, sum) — "use" yo'q│
  │ Custom hook: ichida hook bor (state/effect) — "use" SHART  │
  └──────────────────────────────────────────────────────────┘

   Yangi sintaksis YO'Q — bilgan hooklarni funksiyaga solib, "use" deb nomlash yetarli

  QOIDA 1 — nom "use" bilan boshlansin (use + bosh harf): useToggle, useFetch
  NEGA: React (va ESLint) "use*" ni hook deb taniydi  Rules of Hooks'ni tekshiradi
   "use"siz nomda (getToggle) ESLint hookni ko'rmaydi  qoida buzilishini sezmaydi (xatar)

  QOIDA 2 — Rules of Hooks amal qiladi (11.5: 2.2):
  - custom hook FAQAT komponent yoki boshqa hook ichida chaqiriladi
  - custom hook ENG YUQORIDA chaqiriladi (shart/tsikl ichida emas)
   if (x) { const v = useToggle(); }     // shart ichida — taqiq
   const v = useToggle(); if (x) {...}    // tepada

  QOIDA 3 — custom hook ICHIDA hooklar ham Rules'ga bo'ysunadi (tepada, shartsiz)

  ┌──────────────────────────────────────────────────────────┐
  │ "use" prefiksi — shunchaki kelishuv EMAS, ESLint signali  │
  │  React Hooks ESLint plugin "use*"ni hook deb tekshiradi   │
  └──────────────────────────────────────────────────────────┘

   "use" bilan boshlanmasa — hook xatolarini ESLint TUTMAYDI (jim buglar)

  ENG NOZIK TUSHUNCHA: custom hook MANTIQNI ulashadi, STATE'ni EMAS

  Ikki komponent bir xil hook ishlatsa — har biri O'Z mustaqil state'ini oladi:

  function ComponentA() {
    const [count, inc] = useCounter();   // count_A — ALOHIDA
  }
  function ComponentB() {
    const [count, inc] = useCounter();   // count_B — ALOHIDA (A'ga aloqasi yo'q)
  }
  // ComponentA'da inc qilsang  faqat count_A oshadi (count_B o'zgarmaydi)

  ┌────────────────────────────────────────────────────────────┐
  │ Custom hook — "retsept" (jarayon/logika), tayyor "tort" emas │
  │ Har chaqiruv  yangi, izolyatsiyalangan state nusxasi        │
  └────────────────────────────────────────────────────────────┘

  AGAR state'ni ULASHISH kerak bo'lsa (A va B BIR XIL count ko'rsin):
   custom hook YETMAYDI  Context 12.1-bob yoki global store (Redux/Zustand — 12.2, 12.5)

   Custom hook = qayta ishlatiladigan MANTIQ; ulashilADIgan STATE emas (chalkashtirma!)

  CUSTOM HOOK YARATISH — komponentdagi mantiqni "ko'chirish" (extraction):

  OLDIN (mantiq komponent ichida — takrorlanadi, komponentni to'ldipadi):
  function Profile() {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    useEffect(() => {
      fetch("/api/user").then(r => r.json()).then(d => { setData(d); setLoading(false); });
    }, []);
    return loading ? <Spinner/> : <div>{data.name}</div>;
  }

  KEYIN (mantiq useFetch hook'ga ko'chdi — komponent toza):
  function useFetch(url) {                        // 1. mantiqni funksiyaga ko'chir
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    useEffect(() => {
      fetch(url).then(r => r.json()).then(d => { setData(d); setLoading(false); });
    }, [url]);
    return { data, loading };                     // 2. kerakli narsani qaytar
  }
  function Profile() {
    const { data, loading } = useFetch("/api/user");   // 3. komponent faqat UI'ga qaraydi
    return loading ? <Spinner/> : <div>{data.name}</div>;
  }

   Komponent "NIMA ko'rsatish"ga qaraydi; hook "QANDAY olish/hisoblash"ni biladi (ajratish)

  CUSTOM HOOK kerakli narsani qaytaradi — IKKI usul:

  MASSIV [] — kam element (1-2) + chaqiruvchi NOM bermoqchi bo'lsa:
  function useToggle() { ... return [value, toggle]; }
  const [isOpen, toggleOpen] = useToggle();      // istalgan nom (useState kabi)
  const [isDark, toggleDark] = useToggle();      // qayta — boshqa nom (qulay)

  OBYEKT {} — ko'p element YOKI ba'zilarini olish kerak bo'lsa:
  function useFetch() { ... return { data, loading, error, refetch }; }
  const { data, loading } = useFetch(url);       // faqat keraklisini ol (tartib muhim emas)
  const { data: users } = useFetch(url);         // qayta nomlash mumkin

  ┌──────────────┬────────────────────────────────────────────┐
  │ Massiv []    │ 1-2 qiymat, chaqiruvchi NOM beradi (useState)│
  │ Obyekt {}    │ 3+ qiymat, tanlab olish, o'z-o'zini hujjatlash│
  └──────────────┴────────────────────────────────────────────┘

   Massiv — pozitsiya bo'yicha (tartib muhim); obyekt — nom bo'yicha (tartib erkin)
   Ko'p qiymatli hookda obyekt afzal (data, loading, error — nomi o'zini tushuntiradi)

  CUSTOM HOOK ARGUMENT oladi (oddiy funksiya kabi) — moslashuvchanlik uchun:

  function useFetch(url) {                        // url — argument
    useEffect(() => { fetch(url)... }, [url]);    //  argument deps'da (o'zgarsa qayta — 11.5: 2.6)
  }
  useFetch("/api/users");    useFetch("/api/products");   // turli url

  KO'P ARGUMENT / OPSIYA OBYEKT:
  function useFetch(url, { method = "GET", enabled = true } = {}) {
    useEffect(() => { if (enabled) fetch(url, { method }); }, [url, method, enabled]);
  }
  useFetch("/api/users", { enabled: isLoggedIn });   // shartli yuklash

   Argument effekt ichida ishlatilsa — deps'ga qo'shish shart (exhaustive-deps — 11.5: 2.6)
   Obyekt/funksiya argument — har chaqiruvda yangi havola  ehtiyot (useMemo/useCallback — 11.6: 2.9)

  CUSTOM HOOK ichida boshqa CUSTOM HOOK chaqirilishi mumkin (kompozitsiya):

  function useDebouncedSearch(query) {
    const debouncedQuery = useDebounce(query, 400);   // custom hook ichida custom hook
    const { data, loading } = useFetch(                // yana custom hook
      debouncedQuery ? `/api/search?q=${debouncedQuery}` : null
    );
    return { results: data, loading };
  }
  // useDebouncedSearch = useDebounce + useFetch (ikkita kichik hook  bitta katta)

  ┌────────────────────────────────────────────────────────────┐
  │ Kichik, fokuslangan hooklar  birlashtirib murakkab mantiq   │
  │ (xuddi komponent kompozitsiyasi — 11.2: 2.9 — lekin mantiqda)│
  └────────────────────────────────────────────────────────────┘

   Kichik hooklar (useDebounce, useFetch) — qayta ishlatiladigan "g'ishtlar"
   Ularni birlashtirib (compose) yuqori darajadagi mantiq quriladi (toza, sinaladigan)

  useToggle — boolean almashtirish (modal, accordion, switch):
  function useToggle(initial = false) {
    const [value, setValue] = useState(initial);
    const toggle = useCallback(() => setValue(v => !v), []);   // barqaror (11.6: 2.10)
    return [value, toggle];
  }

  usePrevious — qiymatning OLDINGI holatini eslab qolish (useRef — 11.5: 2.13):
  function usePrevious(value) {
    const ref = useRef();
    useEffect(() => { ref.current = value; }, [value]);   // har render'dan keyin joriy'ni sakla
    return ref.current;                                    // effektdan OLDIN o'qiladi  oldingi qiymat
  }
  // const prevCount = usePrevious(count);   // count o'zgarishidan oldingisi

   usePrevious — useRef'ning klassik ishlatilishi (render'siz "oldingi" qiymat — 11.5: 2.13)

  useLocalStorage — state localStorage'da SAQLANadi (sahifa qayta yuklansa — qoladi):

  function useLocalStorage(key, initialValue) {
    // 1. Boshlang'ich: localStorage'dan o'qi (lazy init — qimmat, bir marta — 11.5)
    const [value, setValue] = useState(() => {
      const saved = localStorage.getItem(key);
      return saved !== null ? JSON.parse(saved) : initialValue;
    });
    // 2. value o'zgarganda localStorage'ga yoz (sinxronlash — 11.5: 2.8)
    useEffect(() => {
      localStorage.setItem(key, JSON.stringify(value));
    }, [key, value]);
    return [value, setValue];                  // useState bilan bir xil interfeys
  }

  ISHLATISH (useState kabi, lekin saqlanadi):
  const [theme, setTheme] = useLocalStorage("theme", "light");
  // sahifani yangilab ochsang ham — theme saqlangan qoladi 

   useState + useEffect(persist) birlashmasi  "saqlanadigan state" (eng foydali hook)
   JSON.parse/stringify — obyekt/massivni ham saqlash uchun (string emas)

  useDebounce — qiymatni KECHIKTIRISH (tez o'zgarishda — oxirgisini kutish):
  function useDebounce(value, delay = 400) {
    const [debounced, setDebounced] = useState(value);
    useEffect(() => {
      const timer = setTimeout(() => setDebounced(value), delay);
      return () => clearTimeout(timer);        //  cleanup: yangi value kelsa eski timerni bekor qil (11.5: 2.7)
    }, [value, delay]);
    return debounced;                          // value to'xtagach yangilanadi
  }
  // const debouncedQuery = useDebounce(query, 400);  // har harfda emas, to'xtagach

  useFetch — ma'lumot olish (loading/error/data — qayta ishlatiladigan):
  function useFetch(url) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);
    useEffect(() => {
      if (!url) return;                        // url yo'q bo'lsa — to'xta
      let ignore = false;                      // race himoyasi (11.5: 2.7)
      setLoading(true); setError(null);
      fetch(url)
        .then(r => { if (!r.ok) throw new Error("Xato"); return r.json(); })
        .then(d => { if (!ignore) setData(d); })
        .catch(e => { if (!ignore) setError(e.message); })
        .finally(() => { if (!ignore) setLoading(false); });
      return () => { ignore = true; };         // cleanup: eski javobni rad et
    }, [url]);
    return { data, loading, error };
  }

   Real loyihada useFetch o'rniga TanStack Query (cache, retry, dedup — 12.4) — lekin tushunish uchun shu

  useWindowSize — oyna o'lchamini kuzatish (resize listener + cleanup):
  function useWindowSize() {
    const [size, setSize] = useState({ width: window.innerWidth, height: window.innerHeight });
    useEffect(() => {
      const onResize = () => setSize({ width: window.innerWidth, height: window.innerHeight });
      window.addEventListener("resize", onResize);
      return () => window.removeEventListener("resize", onResize);   // cleanup (11.5: 2.7)
    }, []);
    return size;
  }

  useOnClickOutside — element TASHQARISIGA bosishni aniqlash (modal/dropdown yopish):
  function useOnClickOutside(ref, handler) {
    useEffect(() => {
      const listener = (e) => {
        if (!ref.current || ref.current.contains(e.target)) return;  // ichida — e'tibormaY
        handler();                              // tashqarida — handler (yop)
      };
      document.addEventListener("mousedown", listener);
      return () => document.removeEventListener("mousedown", listener);
    }, [ref, handler]);
  }

  useMediaQuery — responsive shart (CSS media query JS'da):
  function useMediaQuery(query) {
    const [matches, setMatches] = useState(() => window.matchMedia(query).matches);
    useEffect(() => {
      const mql = window.matchMedia(query);
      const onChange = () => setMatches(mql.matches);
      mql.addEventListener("change", onChange);
      return () => mql.removeEventListener("change", onChange);
    }, [query]);
    return matches;
  }
  // const isMobile = useMediaQuery("(max-width: 768px)");

   Bu hooklar — DOM/brauzer API'ni 11.1-bob React state'ga "ulaydi" (effekt+listener+cleanup naqshi)

  CUSTOM HOOK AJRATISH BELGILARI (qachon ajratish kerak):
   BIR XIL stateful mantiq 2+ joyda takrorlansa (DRY — eng aniq belgi)
   Komponentda mantiq UI'dan KO'P bo'lib ketsa (komponent "to'lib" ketdi)
   Murakkab effekt/cleanup (debounce, subscription) — alohida sinash kerak
   Mantiqqa AYNIQSA YAXSHI nom bersa bo'lsa (useAuth, useCart — o'zini tushuntiradi)

  AJRATMA (inline qoldir):
   Bir marta ishlatiladigan oddiy mantiq (ortiqcha abstraksiya)
   Faqat hisob (hook emas — oddiy funksiya yetadi, "use" kerak emas — 2.2)
   "Balki kerak bo'lar" — oldindan ajratma (haqiqiy takror chiqsa ajrat)

  ┌────────────────────────────────────────────────────────────┐
  │ Takror ko'rinsa  ajrating. Bir marta  inline. (premature emas)│
  └────────────────────────────────────────────────────────────┘

   "Rule of three": bir xil mantiq 3-marta yozilsa — endi custom hook vaqti keldi
   Har hook aniq, bitta mas'uliyatli bo'lsin (9.1 SRP) — "xudo hook" yozma

  CUSTOM HOOK SINASH (test) — komponentdan MUSTAQIL (hook — sof mantiq):
  - @testing-library/react'ning renderHook() bilan 11.17-bob
  - hook chaqiriladi, qaytgan qiymat va o'zgarishlar tekshiriladi (komponentsiz)
   custom hook'ning afzalligi: UI'dan ajralgan mantiq  izolyatsiyalangan test

  TAYYOR KUTUBXONALAR (har narsani noldan yozma):
  - usehooks-ts — TypeScript bilan, 50+ tayyor hook (useLocalStorage, useDebounce...)
  - react-use — katta to'plam (useAsync, useToggle, useInterval...)
  - @uidotdev/usehooks — zamonaviy, sifatli to'plam
  - ahooks — korxona darajasidagi keng to'plam (Alibaba; useRequest kuchli)

  ┌────────────────────────────────────────────────────────────┐
  │ Oddiy/standart hooklar  tayyor kutubxonadan ol (sinalgan)   │
  │ Loyihaga XOS mantiq (useCart, useAuth)  o'zing yoz          │
  └────────────────────────────────────────────────────────────┘

   Tayyor hook — sinalgan, edge-case'lar hisobga olingan (SSR, cleanup)  ishonchli
   Lekin TUSHUNISH SHART: kutubxonani ishlatsa ham, ichida nima bo'layotganini bil (bu bob)

  SAVOL: mantiqni custom hook'ga qo'yaymi yoki oddiy util funksiyagami?

  BELGI — ichida React STATE yoki EFFEKT bormi (useState/useEffect/useRef/useContext...)?
   HA   custom hook kerak ("use" prefiksi, Rules of Hooks amal qiladi)
   YO'Q  oddiy util funksiya (import qilib istalgan joyda ishlat — hook emas)

  MISOL:
  formatDate(d)       sof hisob, state yo'q       util funksiya (utils/date.js)
  isValidEmail(s)     sof tekshiruv, state yo'q    util funksiya
  useLocalStorage()   useState + useEffect ichida  custom hook
  useDebounce()       useState + useEffect ichida  custom hook

  ┌────────────────────────────────────────────────────────────┐
  │ State/effekt kerak emas  util funksiya (oddiy, tez, tekin)  │
  │ State/effekt kerak       custom hook (React hayot siklida)  │
  └────────────────────────────────────────────────────────────┘

   "use" prefiksini FAQAT ichida hook bo'lsa qo'y — aks holda ESLint yolg'on ogohlantiradi

  TYPESCRIPT'DA CUSTOM HOOK — ikki asosiy naqsh (14-QISM'da chuqur):

  1) GENERIC <T> — hook turli tip bilan ishlaydi va tipni SAQLAYDI:
     function useLocalStorage<T>(key: string, initial: T): [T, (v: T) => void] { ... }
     const [n] = useLocalStorage("count", 0);   // n: number (avtomatik chiqariladi)

  2) MASSIV QAYTARSA — "as const" (aks holda tip keng/noaniq bo'ladi):
     return [value, toggle];            //  tip: (boolean | (() => void))[] — chalkash
     return [value, toggle] as const;   //  tip: [boolean, () => void] — aniq tuple

  ┌────────────────────────────────────────────────────────────┐
  │ Generic  hook qayta ishlatiluvchi VA tip-xavfsiz            │
  │ as const  massiv qaytarish uchun aniq tuple tipi (destruktr)│
  └────────────────────────────────────────────────────────────┘

   Obyekt qaytarsa "as const" shart emas (nomlar tipni saqlaydi) — massivda esa SHART

TUZILISH 2.2-bob:   function useX(args) { /* useState/useEffect... */ return natija; }
QOIDA 2.3-bob:      nom "use" bilan; Rules of Hooks (tepada, shartsiz — 11.5: 2.2)
QAYTARISH 2.6-bob:  return [a, b]  (1-2, nomlanadigan)  |  return { a, b, c }  (3+, tanlab)
ARGUMENT 2.7-bob:   useFetch(url, { enabled }) ; effektda ishlatilsa deps'ga qo'sh
KOMPOZITSIYA2.8-bob:function useBig() { const x=useSmall1(); const y=useSmall2(); ... }
ULASHISH 2.4-bob:   har chaqiruv O'Z state'i; state ulashish kerak bo'lsa  Context 12.1-bob
HOOK vs UTIL2.15-bob:ichida hook bor  useX ; sof hisob  oddiy funksiya (util)
TYPESCRIPT2.16-bob: function useX<T>(...) ; massiv qaytsa "return [...] as const"
SINASH 2.14-bob:    renderHook(() => useX())  // komponentsiz 11.17-bob
KUTUBXONA:        usehooks-ts, react-use, @uidotdev/usehooks, ahooks

import { useState, useCallback } from "react";

function useToggle(initial = false) {
  const [value, setValue] = useState(initial);
  const toggle = useCallback(() => setValue(v => !v), []);   // updater + barqaror (11.6)
  const setTrue = useCallback(() => setValue(true), []);
  const setFalse = useCallback(() => setValue(false), []);
  return { value, toggle, setTrue, setFalse };               // obyekt (3+ — 2.6)
}

// Ishlatish — modal:
function Modal() {
  const { value: isOpen, toggle, setFalse } = useToggle(false);
  return (
    <>
      <button onClick={toggle}>Modal ochish</button>
      {isOpen && (
        <div className="modal">
          <p>Modal kontenti</p>
          <button onClick={setFalse}>Yopish</button>
        </div>
      )}
    </>
  );
}

function useCounter(initial = 0, { min = -Infinity, max = Infinity } = {}) {
  const [count, setCount] = useState(initial);
  const increment = useCallback(() => setCount(c => Math.min(c + 1, max)), [max]);
  const decrement = useCallback(() => setCount(c => Math.max(c - 1, min)), [min]);
  const reset = useCallback(() => setCount(initial), [initial]);
  return { count, increment, decrement, reset };
}

function Quantity() {
  const { count, increment, decrement } = useCounter(1, { min: 1, max: 10 });  // 1-10 oralig'ida
  return (
    <div>
      <button onClick={decrement}>-</button>
      <span>{count}</span>
      <button onClick={increment}>+</button>
    </div>
  );
}

import { useRef, useEffect } from "react";

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;                       // har render'dan keyin joriy'ni sakla
  }, [value]);
  return ref.current;                          // return effektdan OLDIN  oldingi qiymat (11.5: 2.13)
}

function PriceTracker({ price }) {
  const prevPrice = usePrevious(price);
  const trend = prevPrice === undefined ? "" : price > prevPrice ? "" : price < prevPrice ? "" : "";
  return <p>Narx: {price} {trend} (oldin: {prevPrice ?? "—"})</p>;
}

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    try {
      const saved = localStorage.getItem(key);
      return saved !== null ? JSON.parse(saved) : initialValue;   // lazy init (11.5)
    } catch {
      return initialValue;                     // JSON xato bo'lca — boshlang'ich
    }
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));   // value o'zgapganda saqla (11.5: 2.8)
  }, [key, value]);

  return [value, setValue];                    // useState bilan bir xil interfeys
}

// Ishlatish — saqlanadigan mavzu:
function App() {
  const [theme, setTheme] = useLocalStorage("theme", "light");
  return (
    <div className={theme}>
      <button onClick={() => setTheme(t => (t === "light" ? "dark" : "light"))}>
        Mavzu: {theme}
      </button>
    </div>
  );
}
//  Sahifani yangilab ochsang ham — theme saqlangan qoladi (2.10)

function useDebounce(value, delay = 400) {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(timer);          //  yangi value kelsa — eski timerni bekor (11.5: 2.7)
  }, [value, delay]);
  return debounced;
}

function Search() {
  const [query, setQuery] = useState("");
  const debouncedQuery = useDebounce(query, 400);   // 400ms to'xtagach yangilanadi

  useEffect(() => {
    if (debouncedQuery) console.log("Qidirilmoqda:", debouncedQuery);  // bu yerda fetch
  }, [debouncedQuery]);                         // har harfda emas — to'xtagach

  return <input value={query} onChange={e => setQuery(e.target.value)} />;
}

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    if (!url) return;                          // url bo'lmaca — yuklama
    let ignore = false;                        // race himoyasi (11.5: 2.7)
    setLoading(true); setError(null);
    fetch(url)
      .then(r => { if (!r.ok) throw new Error(`HTTP ${r.status}`); return r.json(); })
      .then(d => { if (!ignore) setData(d); })
      .catch(e => { if (!ignore) setError(e.message); })
      .finally(() => { if (!ignore) setLoading(false); });
    return () => { ignore = true; };           // cleanup: eski javobni rad et
  }, [url]);

  return { data, loading, error };
}

function UserList() {
  const { data: users, loading, error } = useFetch("/api/users");
  if (loading) return <Spinner />;
  if (error) return <p className="error">{error}</p>;
  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}
//  Real loyihada — TanStack Query 12.4-bob; bu hook mexanizmni tushunish uchun

function useWindowSize() {
  const [size, setSize] = useState({ width: window.innerWidth, height: window.innerHeight });

  useEffect(() => {
    const onResize = () => setSize({ width: window.innerWidth, height: window.innerHeight });
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);   // cleanup (11.5: 2.7)
  }, []);

  return size;
}

function Responsive() {
  const { width } = useWindowSize();
  return <p>{width < 768 ? " Mobil" : " Desktop"} ({width}px)</p>;
}

function useOnClickOutside(ref, handler) {
  useEffect(() => {
    const listener = (e) => {
      if (!ref.current || ref.current.contains(e.target)) return;  // ichida bosildi — e'tibormaY
      handler();                               // tashqarida — handler (yop)
    };
    document.addEventListener("mousedown", listener);
    return () => document.removeEventListener("mousedown", listener);
  }, [ref, handler]);
}

function Dropdown() {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useOnClickOutside(ref, () => setOpen(false)); // tashqariga bosca yopiladi

  return (
    <div ref={ref} className="dropdown">
      <button onClick={() => setOpen(o => !o)}>Menyu</button>
      {open && <ul className="menu"><li>Profil</li><li>Chiqish</li></ul>}
    </div>
  );
}

function useMediaQuery(query) {
  const [matches, setMatches] = useState(() => window.matchMedia(query).matches);
  useEffect(() => {
    const mql = window.matchMedia(query);
    const onChange = () => setMatches(mql.matches);
    mql.addEventListener("change", onChange);
    return () => mql.removeEventListener("change", onChange);
  }, [query]);
  return matches;
}

function Layout() {
  const isMobile = useMediaQuery("(max-width: 768px)");
  return isMobile ? <MobileNav /> : <DesktopNav />;   // shartli komponent (11.4: 2.12)
}

function useInterval(callback, delay) {
  const savedCallback = useRef(callback);

  useEffect(() => {
    savedCallback.current = callback;          // har render'da eng yangi callback'ni sakla
  }, [callback]);

  useEffect(() => {
    if (delay === null) return;                // null  to'xta (pauza)
    const id = setInterval(() => savedCallback.current(), delay);  // ref'dan eng yangini chaqir
    return () => clearInterval(id);            // cleanup
  }, [delay]);                                  // faqat delay o'zgapganda qayta o'rnat
}
//  Ref naqshi — stale closure'ni (11.5: 2.9) hal qiladi: callback yangilanadi,
//    lekin interval qayta o'rnatilmaydi (delay o'zgapmaca). Klassik custom hook namunasi.

function Timer() {
  const [count, setCount] = useState(0);
  const [running, setRunning] = useState(true);
  useInterval(() => setCount(c => c + 1), running ? 1000 : null);  // null  pauza
  return <button onClick={() => setRunning(r => !r)}>{count} {running ? "" : "▶"}</button>;
}

// Ikki kichik hookni birlashtirib (compose) yuqori darajadagi mantiq:
function useDebouncedSearch(query, delay = 400) {
  const debouncedQuery = useDebounce(query, delay);          // hook 1 (Misol 5)
  const { data, loading, error } = useFetch(                 // hook 2 (Misol 6)
    debouncedQuery ? `/api/search?q=${encodeURIComponent(debouncedQuery)}` : null
  );
  return { results: data ?? [], loading, error };
}

function SearchPage() {
  const [query, setQuery] = useState("");
  const { results, loading } = useDebouncedSearch(query);     // bitta toza hook

  return (
    <div>
      <input value={query} onChange={e => setQuery(e.target.value)} placeholder="Qidirish..." />
      {loading && <small>Qidirilmoqda...</small>}
      <ul>{results.map(r => <li key={r.id}>{r.title}</li>)}</ul>
    </div>
  );
}
//  useDebounce + useFetch = useDebouncedSearch (mantiq kompozitsiyasi — 2.8)

function useForm(initialValues) {
  const [values, setValues] = useState(initialValues);
  const [errors, setErrors] = useState({});

  const handleChange = useCallback((e) => {
    const { name, value } = e.target;
    setValues(prev => ({ ...prev, [name]: value }));          // dinamik maydon (11.4: 2.8)
  }, []);

  const reset = useCallback(() => { setValues(initialValues); setErrors({}); }, [initialValues]);

  return { values, errors, setErrors, handleChange, reset };
}

function ContactForm() {
  const { values, handleChange, reset } = useForm({ name: "", email: "" });
  return (
    <form onSubmit={(e) => { e.preventDefault(); console.log(values); reset(); }}>
      <input name="name" value={values.name} onChange={handleChange} />
      <input name="email" value={values.email} onChange={handleChange} />
      <button>Yuborish</button>
    </form>
  );
}
//  Bu — soddalashtirilgan forma hook'i; real loyihada React Hook Form 11.10-bob ancha kuchli

// Bitta hook — ikki komponentda — IKKI ALOHIDA state (ulashilmaydi!)
function Counter({ label }) {
  const { count, increment } = useCounter(0);   // har Counter o'z count'i (Misol 2)
  return <button onClick={increment}>{label}: {count}</button>;
}

function App() {
  return (
    <>
      <Counter label="A" />     {/* count_A — mustaqil */}
      <Counter label="B" />     {/* count_B — mustaqil (A'ga aloqasi yo'q) */}
    </>
  );
}
//  A'ni bosca faqat A oshadi (B o'zgapmaydi) — hook MANTIQNI ulashadi, STATE'ni emas (2.4)
//    Agar A va B BIR XIL count ko'rsin desang  Context 12.1-bob yoki Redux (12.2)

// Context + custom hook = global auth (state ULASHILadi — chunki Context — 2.4)
const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [user, setUser] = useLocalStorage("user", null);     // saqlanadigan (Misol 4)
  const login = useCallback(async (creds) => {
    const data = await api.login(creds);
    setUser(data.user);
  }, [setUser]);
  const logout = useCallback(() => setUser(null), [setUser]);
  const value = useMemo(() => ({ user, login, logout }), [user, login, logout]);  // barqaror (11.6: 2.9)
  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}

// Custom hook — Context'ni qulay o'rab beradi + xato tekshiruvi:
export function useAuth() {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error("useAuth AuthProvider ichida ishlatilishi kerak");  // foydali xato
  return ctx;
}

// Istalgan joyda:
function Navbar() {
  const { user, logout } = useAuth();
  return user ? <button onClick={logout}>Chiqish</button> : <a href="/login">Kirish</a>;
}
//  useLocalStorage + Context + useMemo birlashmasi — real auth naqshi (2.8 kompozitsiya)

import { useRef, useEffect } from "react";

function useEventListener(eventName, handler, element = window) {
  const savedHandler = useRef(handler);

  useEffect(() => {
    savedHandler.current = handler;             // eng yangi handler'ni ref'da sakla (stale closure yo'q — Misol 10)
  }, [handler]);

  useEffect(() => {
    const target = element?.current ?? element; // ref bo'lsa .current, aks holda o'zi (window/document)
    if (!target?.addEventListener) return;
    const listener = (e) => savedHandler.current(e);   // ref orqali chaqir — doim yangi
    target.addEventListener(eventName, listener);
    return () => target.removeEventListener(eventName, listener);   // cleanup (11.5: 2.7)
  }, [eventName, element]);                      // handler deps'da EMAS — ref hal qildi
}

function ScrollTracker() {
  const [y, setY] = useState(0);
  useEventListener("scroll", () => setY(window.scrollY));   // handler har render yangi — muammo yo'q
  return <p>Scroll: {Math.round(y)}px</p>;
}
//  Poydevor hook: useWindowSize/useOnClickOutside'ni endi shu ustiga qurish mumkin (2.8)

function useThrottle(value, interval = 200) {
  const [throttled, setThrottled] = useState(value);
  const lastRun = useRef(Date.now());

  useEffect(() => {
    const sinceLast = Date.now() - lastRun.current;
    if (sinceLast >= interval) {
      lastRun.current = Date.now();
      setThrottled(value);                       // interval o'tgan — darrov yangila
    } else {
      const timer = setTimeout(() => {           // interval to'lguncha kut, keyin yangila
        lastRun.current = Date.now();
        setThrottled(value);
      }, interval - sinceLast);
      return () => clearTimeout(timer);          // cleanup (11.5: 2.7)
    }
  }, [value, interval]);

  return throttled;
}
// const throttledScroll = useThrottle(scrollY, 200);   // har 200ms'da eng ko'pi bir yangilanish
//  Debounce (oxirini kut) vs Throttle (muntazam o'tkaz) — ikkalasi ham "chastotani cheklash", turli holatga

function useCopyToClipboard() {
  const [copied, setCopied] = useState(false);

  const copy = useCallback(async (text) => {
    if (!navigator?.clipboard) {                 // eski brauzer — qo'llab-quvvatlanmaydi
      setCopied(false);
      return false;
    }
    try {
      await navigator.clipboard.writeText(text);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);  // 2s'dan keyin "nusxalandi" holatini o'chir
      return true;
    } catch {
      setCopied(false);
      return false;
    }
  }, []);

  return { copied, copy };                        // 2+ qiymat  obyekt (2.6)
}

function ShareButton({ link }) {
  const { copied, copy } = useCopyToClipboard();
  return (
    <button onClick={() => copy(link)}>
      {copied ? " Nusxalandi" : " Havolani nusxalash"}
    </button>
  );
}
//  Async brauzer API'sini (Clipboard) + vaqtinchalik holatni (copied) qulay hookga o'raydi

function useIntersectionObserver(options) {
  const [entry, setEntry] = useState(null);
  const ref = useRef(null);

  useEffect(() => {
    const node = ref.current;
    if (!node || !("IntersectionObserver" in window)) return;
    const observer = new IntersectionObserver(([e]) => setEntry(e), options);
    observer.observe(node);
    return () => observer.disconnect();          // cleanup — observer'ni uz (11.5: 2.7)
  }, [options]);                                  //  options barqaror bo'lsin (useMemo — 2.7)

  return [ref, entry];                            // [element'ga ulanadigan ref, kuzatuv natijasi]
}

// Infinite scroll: "sentinel" element ekranga kirsa — keyingi sahifa
function Feed({ loadMore }) {
  const [ref, entry] = useIntersectionObserver({ threshold: 1 });
  useEffect(() => {
    if (entry?.isIntersecting) loadMore();        // oxirdagi element ko'rindi  yukla
  }, [entry?.isIntersecting, loadMore]);
  return <div ref={ref} className="sentinel">Yuklanmoqda...</div>;
}
//  options obyekti chaqiruvchida useMemo bilan barqaror bo'lsin — aks holda effekt har render qayta ishlaydi (2.7, Xato 4)

function useAsync(asyncFn) {
  const [state, setState] = useState({ status: "idle", data: null, error: null });

  const run = useCallback(async (...args) => {
    setState({ status: "pending", data: null, error: null });
    try {
      const data = await asyncFn(...args);
      setState({ status: "success", data, error: null });
      return data;
    } catch (error) {
      setState({ status: "error", data: null, error });
      throw error;
    }
  }, [asyncFn]);

  return { ...state, run, isLoading: state.status === "pending" };
}

function SaveButton({ save }) {
  const { run, isLoading, status } = useAsync(save);
  return (
    <button onClick={() => run()} disabled={isLoading}>
      {isLoading ? "Saqlanmoqda..." : status === "success" ? "Saqlandi " : "Saqlash"}
    </button>
  );
}
//  useFetch — "fetch"ga xos; useAsync — istalgan Promise'ga umumiy (login, upload, hisob)

function useDisclosure(initial = false) {
  const [isOpen, setIsOpen] = useState(initial);
  const open = useCallback(() => setIsOpen(true), []);
  const close = useCallback(() => setIsOpen(false), []);
  const toggle = useCallback(() => setIsOpen((v) => !v), []);
  return { isOpen, open, close, toggle };
}

function Page() {
  const modal = useDisclosure();                  // bitta obyektda hammasi
  return (
    <>
      <button onClick={modal.open}>Ochish</button>
      {modal.isOpen && (
        <div className="modal">
          <p>Modal</p>
          <button onClick={modal.close}>Yopish</button>
        </div>
      )}
    </>
  );
}
//  Bitta obyekt qaytarish  ko'p modal boshqarilsa qulay: const create = useDisclosure(); const edit = useDisclosure();

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [reloadKey, setReloadKey] = useState(0);          // refetch uchun "trigger"

  const refetch = useCallback(() => setReloadKey((k) => k + 1), []);   // barqaror (2.6)

  useEffect(() => {
    if (!url) return;
    const controller = new AbortController();             //  so'rovni bekor qilish uchun
    setLoading(true);
    setError(null);
    fetch(url, { signal: controller.signal })
      .then((r) => {
        if (!r.ok) throw new Error(`HTTP ${r.status}`);
        return r.json();
      })
      .then((d) => setData(d))
      .catch((e) => {
        if (e.name !== "AbortError") setError(e.message);  // bekor qilish — xato emas, e'tiborsiz qoldir
      })
      .finally(() => {
        if (!controller.signal.aborted) setLoading(false);
      });
    return () => controller.abort();                       // cleanup: so'rovni HAQIQATAN to'xtat (11.5: 2.7)
  }, [url, reloadKey]);                                    // reloadKey o'zgarsa — qayta yuklaydi

  return { data, loading, error, refetch };                // refetch ham qaytariladi
}

function Products() {
  const { data, loading, error, refetch } = useFetch("/api/products");
  if (loading) return <Spinner />;
  if (error) return <button onClick={refetch}>Xato — qayta urinish</button>;   // refetch ishlatilishi
  return <ul>{data.map((p) => <li key={p.id}>{p.name}</li>)}</ul>;
}
//  AbortController — real so'rovni to'xtatadi (ignore-bayroq faqat natijani tashlaydi); refetch — qo'lda qayta yuklash

import { useState, useCallback, useEffect } from "react";

// Generic — qiymat tipini saqlaydi:
function useLocalStorage<T>(key: string, initialValue: T) {
  const [value, setValue] = useState<T>(() => {
    const saved = localStorage.getItem(key);
    return saved !== null ? (JSON.parse(saved) as T) : initialValue;
  });
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);
  return [value, setValue] as const;             //  tuple: [T, Dispatch<SetStateAction<T>>]
}

// Ishlatish — tip avtomatik chiqariladi (inference):
const [count, setCount] = useLocalStorage("count", 0);        // count: number
const [user, setUser] = useLocalStorage<User>("user", null!); // user: User

// Toggle — aniq tuple tipi:
function useToggle(initial = false) {
  const [value, setValue] = useState(initial);
  const toggle = useCallback(() => setValue((v) => !v), []);
  return [value, toggle] as const;               // [boolean, () => void] — aniq
}
//  `as const` bo'lmasa — return tip (boolean | (() => void))[] bo'lib, destrukturda tiplar aralashadi (14-bob)

 function getToggle() { useState(...) }  ("use" yo'q — ESLint hook deb ko'rmaydi — 2.3)
 function useToggle() { useState(...) }  ("use" prefiksi — majburiy)

 if (x) { const v = useFetch(url); }  (shart ichida — Rules buzildi — 2.3)
 const v = useFetch(x ? url : null); if (x) {...}  (tepada; shartni argument bilan)

 ikki komponentda useCart() — bir xil savat ko'rsin deb kutish (alohida state — 2.4)
 ulashiladigan state  Context/Redux; custom hook faqat mantiq (2.4)

 function useFormatDate(d) { return d.toLocaleString(); }  (hook yo'q ichida — 2.2)
 function formatDate(d) {...}  (oddiy funksiya — "use" kerak emas)

 function useFetch(url) { useEffect(() => fetch(url), []) }  (url deps'da yo'q — 2.7)
 }, [url])  (argument effektda  deps'ga qo'sh — 11.5: 2.6)

 har kichik mantiqni darrov hookga ajratish (ortiqcha abstraksiya — 2.13)
 takror (2+) yoki murakkablik chiqsa ajrat (Rule of three)