11.5-bob: Hooks — useState, useEffect, useContext, useRef

  HOOK — funksiya komponentga React imkoniyatlarini "ulaydigan" maxsus funksiya
         (nomi "use" bilan boshlanadi: useState, useEffect, useRef, useContext...)

  TARIX (nega hooklar paydo bo'ldi):
  ESKI (class komponent — murakkab):
  class Counter extends React.Component {
    constructor() { super(); this.state = { count: 0 }; }
    componentDidMount() { /* mount */ }
    componentDidUpdate() { /* update */ }
    componentWillUnmount() { /* cleanup */ }
    render() { return <button onClick={() => this.setState(...)}>...</button>; }
  }
  MUAMMOLAR: this chalkash, mantiq 3 metodga bo'linib ketadi, qayta ishlatish qiyin (HOC do'zaxi)

  YANGI (funksiya + hook — sodda):
  function Counter() {
    const [count, setCount] = useState(0);
    useEffect(() => { /* mount + update + cleanup — BIR joyda */ });
    return <button onClick={() => setCount(count + 1)}>{count}</button>;
  }

   Hooklar (2018, React 16.8): this yo'q, mantiq birga, qayta ishlatish oson (custom hook — 11.7)

  IKKI QOIDA (qat'iy):
  1. Hooklarni faqat ENG YUQORIDA chaqir (shart, tsikl, ichki funksiya ICHIDA EMAS)
  2. Hooklarni faqat React funksiyalarida chaqir (komponent yoki custom hook — 11.7)

  NEGA? React hooklarni NOM bilan emas, CHAQIRUV TARTIBI bilan kuzatadi:
  function Form() {
    const [name, setName] = useState("");     // hook #1
    const [age, setAge] = useState(0);        // hook #2
    useEffect(() => {...});                   // hook #3
    // React ichida: [#1: name, #2: age, #3: effect] — TARTIB bo'yicha massiv
  }

   SHART ICHIDA — tartib BUZILADI:
  if (loggedIn) {
    const [name, setName] = useState("");     // ba'zan #1, ba'zan YO'Q!
  }                                            //  React tartibni yo'qotadi  state aralashadi

  ┌────────────────────────────────────────────────────────────┐
  │ Render 1 (loggedIn=true):  [#1 name, #2 age]                │
  │ Render 2 (loggedIn=false): [#1 age]  name o'tib ketdi!     │
  │  React #1 ni "name" deb bilardi, endi "age"  FALOKAT      │
  └────────────────────────────────────────────────────────────┘

   Hooklar HAR render'da BIR XIL TARTIB, BIR XIL SONDA chaqirilishi SHART
   ESLint plugin (eslint-plugin-react-hooks) buni avtomatik tekshiradi (15.3)

  KOMPONENTDA ISTAGANCHA state bo'lishi mumkin (har biri mustaqil):
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [loading, setLoading] = useState(false);

  ALOHIDA state vs BITTA obyekt state — qaysi biri?
   Alohida (oddiy, mustaqil maydonlar):      const [a]=.. const [b]=..
   Obyekt (birga o'zgaradigan, forma):       const [form, setForm] = useState({a, b})
   ikkalasi to'g'ri; bog'liqligi va soni bo'yicha tanlanadi (juda ko'p bo'lsa — useReducer 11.6)

   Bir-biriga bog'liq state'larni alohida tutsang — sinxronlash muammosi (useReducer afzal)
   Mustaqil, oddiy state'lar — alohida toza (form butun bo'lsa — obyekt)

  LAZY INIT (dangasa boshlang'ich qiymat) — boshlang'ich qiymat QIMMAT bo'lganda:
   const [state, set] = useState(qimmatHisob());     // qimmatHisob() HAR render'da chaqiriladi!
   const [state, set] = useState(() => qimmatHisob()); // funksiya — FAQAT birinchi render'da

   useState argumenti FUNKSIYA bo'lsa, React uni faqat mount'da bir marta chaqiradi
    (masalan localStorage'dan o'qish, katta massiv qurish — har render'da takrorlanmasin)

  FUNKSIONAL UPDATE (updater funksiya) — yangi qiymat ESKISIGA bog'liq bo'lganda:
   setCount(count + 1); setCount(count + 1);   // ikkalasi ham BIR xil snapshot count'dan  +1
   setCount(c => c + 1); setCount(c => c + 1); // React navbatga qo'yadi  +2 (11.4: 2.6)

  ┌────────────────────────────────────────────────────────────────┐
  │ set(yangiQiymat)   — to'g'ridan qiymat (eskiga bog'liq emas)     │
  │ set(esk => yangi)  — updater; esk = navbatdagi eng yangi qiymat  │
  └────────────────────────────────────────────────────────────────┘

   Lazy init: argument funksiya (chaqiruv EMAS) — useState(fn), useState(fn()) EMAS
   Updater: asinxron/taymer/ketma-ket setX'da stale closure'dan himoya (2.9)

  PURE RENDER (komponent funksiyasi — toza bo'lishi kerak — 11.2):
   faqat props/state'dan JSX HISOBLAYDI, boshqa hech narsa qilmaydi
   hech qanday "nojo'ya ish" yo'q (server chaqiruvi, DOM o'zgartirish, taymer)

  SIDE EFFECT (nojo'ya ta'sir) — render'dan TASHQARIDAGI dunyoga ta'sir:
  - serverdan ma'lumot olish (fetch — 12.4)
  - taymer/interval o'rnatish (setInterval)
  - hodisaga obuna (addEventListener, WebSocket — 5.13)
  - DOM'ni qo'lda o'zgartirish (document.title, focus)
  - localStorage'ga yozish

   Effect'ni render PAYTIDA bajarma (komponent nopok bo'ladi, ikki marta ishlaydi — 11.2: 2.11)
   Effect'ni useEffect ICHIDA bajar  React uni RENDER'dan KEYIN (commit'dan so'ng) ishga tushiradi

  ┌──────────────────────────────────────────────────────────┐
  │ Render (toza hisob)    Ekran (commit)    useEffect ishlaydi│
  └──────────────────────────────────────────────────────────┘

  useEffect(setup, dependencies):

  useEffect(() => {
    // SETUP — effekt mantiqi (render'dan KEYIN ishlaydi)
    console.log("Effekt ishladi");

    return () => {
      // CLEANUP — tozalash (ixtiyoriy — keyingi effekt/unmount'dan OLDIN — 2.7)
      console.log("Tozalandi");
    };
  }, [dependencies]);   // BOG'LIQLIKLAR massivi (qachon qayta ishlashni belgilaydi — 2.6)

  3 QISM:
  1. setup funksiya     — nima qilish (effekt)
  2. cleanup (return)   — orqani yig'ishtirish (ixtiyoriy)
  3. dependency array   — qachon ishlash (yo'q / [] / [a, b])

  QACHON ISHLAYDI:
  - Komponent ekranga chizilgach (mount'dan keyin)
  - dependency o'zgargach (qayta render + dep boshqacha)
  - Komponent yo'qolishdan oldin cleanup (unmount)

   Render PAYTIDA emas, render'dan KEYIN (ekran allaqachon yangilangan)

  DEPENDENCY ARRAY uch holat — effekt QACHON qayta ishlashni belgilaydi:

  1. ARRAY YO'Q — HAR render'dan keyin ishlaydi (kamdan-kam kerak, ehtiyotkorlik):
  useEffect(() => { console.log("har render") });

  2. BO'SH ARRAY [] — FAQAT BIR MARTA (mount'da — komponent paydo bo'lganda):
  useEffect(() => { fetchData(); }, []);   // boshlang'ich yuklash uchun ideal

  3. [a, b] — a yoki b O'ZGARganda ishlaydi (kuzatish):
  useEffect(() => { fetchUser(userId); }, [userId]);  // userId o'zgarsa qayta yukla

  ┌──────────────┬─────────────────────────────────────────────┐
  │ deps         │ Effekt qachon ishlaydi                        │
  ├──────────────┼─────────────────────────────────────────────┤
  │ (yo'q)       │ HAR render'dan keyin                          │
  │ []           │ faqat 1 marta (mount)                         │
  │ [a, b]       │ mount + a yoki b o'zgarganda                  │
  └──────────────┴─────────────────────────────────────────────┘

   QOIDA: effekt ICHIDA ishlatilgan har bir o'zgaruvchi (props/state) deps'da BO'LISHI shart
   ESLint (exhaustive-deps) yetishmagan bog'liqlikni ogohlantiradi — quloq sol! (2.9)

   setup funksiyaning O'ZINI async qilib bo'lmaydi:
  useEffect(async () => {              // async funksiya Promise qaytaradi
    const data = await fetch(...);     // React esa cleanup FUNKSIYA kutadi (Promise emas)
  }, []);                               //  cleanup ishlamaydi, ogohlantirish

   async ishni ICHKI funksiyada bajar (setup'ning o'zi sinxron qoladi):
  useEffect(() => {
    let ignore = false;                          // race himoyasi (Misol 3)
    async function load() {
      const data = await fetchUser(userId);
      if (!ignore) setUser(data);                // faqat hali aktual bo'lsa
    }
    load();
    return () => { ignore = true; };             // cleanup — oddiy sinxron funksiya
  }, [userId]);

   setup HAR doim sinxron; async'ni ichki funksiyaga o'ra, keyin chaqir
   Cleanup funksiya HECH QACHON async bo'lmaydi (React uni darhol chaqiradi)

  CLEANUP (return () => {...}) — effekt "orqasini yig'ishtiradi" (resurs bo'shatadi)

  QACHON ishlaydi:
  - Keyingi effekt ishlashdan OLDIN (dependency o'zgarganda — eskini tozala, keyin yangisi)
  - Komponent yo'qolishdan oldin (unmount — butunlay tozala)

  NEGA KERAK — resurs sizib ketmasligi (memory leak) uchun:
  useEffect(() => {
    const id = setInterval(() => tick(), 1000);   // taymer o'rnatildi
    return () => clearInterval(id);               //  komponent yo'qolsa — taymerni O'CHIR
  }, []);
  //  cleanup bo'lmasa: komponent yo'qolsa ham taymer ishlayveradi (leak + xato)

  TIPIK CLEANUP holatlari:
  - clearInterval / clearTimeout (taymer)
  - removeEventListener (hodisa)
  - socket.disconnect() / unsubscribe() (obuna — 5.13)
  - AbortController.abort() (fetchni bekor qilish — 12.4)

   StrictMode (dev) effektni IKKI marta ishga tushiradi (setupcleanupsetup)
      cleanup TO'G'RI yozilgan bo'lsa, muammo yo'q (bu ataylab — leak'ni fosh qiladi — 11.2: 2.11)

  ESKI (NOTO'G'RI) MENTAL MODEL — "hayot sikli" (lifecycle):
  "useEffect(() => {}, []) — bu componentDidMount"  CHALKASH va xato keltiradi

  YANGI (TO'G'RI) MENTAL MODEL — "SINXRONLASH" (synchronization):
  "useEffect — komponentni TASHQI tizim bilan SINXRON ushlab turish"

  Misol: chat xonasiga ulanish (roomId state'ga qarab):
  useEffect(() => {
    const conn = connectToRoom(roomId);   // SINXRON: roomId qanday bo'lsa, shu xonaga ulan
    return () => conn.disconnect();        // roomId o'zgarsa: eskidan uzil, yangiga ulan
  }, [roomId]);

   roomId="A": ulanish A. roomId="B" bo'ldi: A'dan uzil (cleanup)  B'ga ulan (setup)
   React effektni UI'ni state bilan sinxron ushlagandek, tashqi tizimni ham sinxron ushlaydi

   "Effekt qachon ishlaydi?" emas, "effekt NIMANI sinxron ushlaydi?" deb o'yla
   deps — "qaysi qiymat o'zgarsa qayta sinxronlash kerak" (lifecycle vaqti emas)

  TUZOQ 1 — INFINITE LOOP (cheksiz tsikl):
   useEffect(() => { setCount(count + 1); });   // deps yo'q  har render setX  render  ...
   useEffect(() => { setData(fetch()); }, [data]); // data o'zgaradi  effekt  data  ...
   to'g'ri deps: [] (bir marta) yoki kerakli bog'liqlik (object dep'dan ehtiyot bo'l)

  TUZOQ 2 — OBJECT/FUNCTION DEPENDENCY (har render'da yangi havola):
   const options = { id: 5 };                  // har render'da YANGI obyekt (yangi havola)
     useEffect(() => {...}, [options]);          //  har render'da "o'zgargan" deb ko'rinadi  tsikl
   primitiv dep: }, [options.id])  yoki  obyektni effekt ichida yarat / useMemo 11.6-bob

  TUZOQ 3 — STALE CLOSURE (eskirgan qiymat — eng nozik):
   useEffect(() => {
       const id = setInterval(() => setCount(count + 1), 1000); // count MOUNT'dagi qiymatda QOTGAN
       return () => clearInterval(id);
     }, []);   // count har doim 0 (effekt 1 marta yaratilgan, count o'sha render'dan — 11.4: 2.3)
   updater funksiya: setInterval(() => setCount(c => c + 1), 1000)  // c — har doim yangi (11.4: 2.6)

   Ko'p tuzoq deps'ni "aldash"dan keladi  ESLint exhaustive-deps'ga quloq sol (2.6)

  KENG XATO: hamma narsaga useEffect ishlatish (react.dev maxsus ogohlantiradi)

   KERAK EMAS — HOSILANgan ma'lumot (state'dan hisoblanadi):
  const [first, setFirst] = useState(""); const [last, setLast] = useState("");
  const [full, setFull] = useState("");
  useEffect(() => { setFull(first + " " + last); }, [first, last]); //  ortiqcha render + effekt
   const full = first + " " + last;   // render PAYTIDA hisobla (state EMAS — 11.4: 2.14)

   KERAK EMAS — HODISAGA javob (event handler'da qil):
  useEffect(() => { if (submitted) sendData(); }, [submitted]); //  chalkash, ortiqcha state
   function handleSubmit() { sendData(); }   // to'g'ridan handler'da

  useEffect QACHON KERAK (haqiqiy side effect — tashqi tizim bilan sinxronlash):
   Serverdan ma'lumot olish (mount'da yoki id o'zgarganda — 12.4)
   Tashqi tizimga obuna (WebSocket, event listener, taymer)
   DOM bilan qo'lda ishlash (title, focus, o'lchov)

   "Bu effekt tashqi dunyo bilan sinxronlaydimi?" — YO'Q bo'lsa, effekt KERAK EMAS
   Derived state'ni render'da hisobla; hodisani handler'da qil (effekt emas)

  MUAMMO — PROPS DRILLING (props'ni ko'p qatlam orqali "burg'ulab" o'tkazish):
  App (theme)  Page (theme)  Layout (theme)  Sidebar (theme)  Button (theme)
  // theme faqat Button'ga kerak, lekin HAR qatlamdan qo'lda uzatamiz (zerikarli, mo'rt)

  YECHIM — CONTEXT (markaziy "radio to'lqini" — istalgan chuqurlikdan o'qiladi):

  1. Context yarat (alohida faylda):
  const ThemeContext = createContext("light");   // default qiymat

  2. Provider bilan o'ra (ma'lumot manbai — yuqorida):
  <ThemeContext.Provider value={theme}>
    <App />                          {/* App va uning butun ostki daraxti theme'ni o'qiy oladi */}
  </ThemeContext.Provider>
  // React 19: to'g'ridan <ThemeContext value={theme}> (.Provider'siz)

  3. Istalgan bola o'qiydi (props drilling'siz):
  const theme = useContext(ThemeContext);   // to'g'ridan oladi (qatlamlar oraliq emas)

  QACHON Context: theme, til (i18n), autentifikatsiya (user), savat — GLOBAL/yarim-global ma'lumot
   Context — props drilling'ni yo'qotadi, LEKIN tez-tez o'zgaradigan ma'lumotga — ehtiyotkorlik
     (Provider value o'zgarsa, BARCHA consumer re-render — katta state uchun Redux/Zustand 12.2)

  DEFAULT QIYMAT — createContext(default) argumenti FAQAT Provider TOPILMAGANDA ishlaydi:
  const ThemeContext = createContext("light");   // Provider yo'q daraxtda  "light"
  //  Provider bilan o'ralgan bo'lsa — default e'tiborga olinmaydi (value ishlatiladi)
  //  createContext(null) + custom hook'da tekshirish — Provider'siz ishlatishni tutadi (Xato 5)

  KO'P CONTEXT — bir ilovada bir nechta mustaqil context (ular ustma-ust o'raladi):
  <AuthProvider>
    <ThemeProvider>
      <App />           {/* App ham auth, ham theme'ni o'qiy oladi */}
    </ThemeProvider>
  </AuthProvider>
   har biri o'z mas'uliyati uchun (auth, theme, til) — aralashtirilmaydi

  PERFORMANCE — CONTEXT SPLIT (bo'lish): value o'zgarsa BARCHA consumer re-render:
   <Ctx value={{ user, theme, cart, setCart }}>  // cart o'zgarsa — user o'quvchilari ham re-render
   Alohida context: <UserCtx> + <ThemeCtx> + <CartCtx>  // faqat kerakli qism re-render
   value'ni useMemo bilan barqarorlashtir 11.6-bob — har render'da yangi obyekt bermaslik

   Tez o'zgaradigan qism (masalan input value) — alohida context yoki state pastroqda
   Katta global state — Redux/Zustand context'dan ko'ra optimallashgan (12.2, 12.5)

  useRef — DOM elementiga "ishora" (React'dan tashqari to'g'ridan kirish kerak bo'lganda):

  function SearchInput() {
    const inputRef = useRef(null);              // 1. ref yarat (boshlang'ich null)

    useEffect(() => {
      inputRef.current.focus();                 // 3. DOM metodi (.current — haqiqiy element)
    }, []);                                       //    mount'da fokusni inputga qo'y

    return <input ref={inputRef} />;            // 2. ref'ni elementga ula
  }

  REF + DOM tipik holatlar:
  - .focus() / .blur()        (fokus boshqaruvi)
  - .scrollIntoView()         (elementga skroll)
  - element o'lchovi (.offsetWidth, getBoundingClientRect)
  - <video>/<audio> .play()/.pause(), canvas, 3-tomon kutubxona (chart, map)

   ref.current — render'dan KEYIN to'ladi (DOM mavjud bo'lgach)  useEffect ichida ishlat
   DOM'ni React boshqaradi; ref FAQAT React qila olmaydigan narsaga (fokus, skroll, o'lchov)
   React 19: ref oddiy prop (forwardRef ko'p holda kerak emas — 11.12)

  useRef — DOM'dan tashqari: RE-RENDER'SIZ o'zgaradigan qiymat saqlash (cho'ntak daftarchasi)

  useState vs useRef:
  ┌──────────────┬─────────────────────┬──────────────────────────┐
  │              │ useState            │ useRef                   │
  ├──────────────┼─────────────────────┼──────────────────────────┤
  │ o'zgarsa     │ RE-RENDER qiladi    │ re-render qilMAYDI       │
  │ qiymat       │ render'lar orasida  │ render'lar orasida       │
  │              │ saqlanadi           │ saqlanadi                │
  │ o'qish/yozish│ [val, setVal]       │ ref.current (to'g'ridan) │
  │ uchun        │ UI'da ko'rinadigan  │ UI'ga ta'sir qilmaydigan │
  └──────────────┴─────────────────────┴──────────────────────────┘

  TIPIK (render'siz qiymat):
  - interval/timeout ID saqlash (keyin tozalash uchun):
    const idRef = useRef(null);
    idRef.current = setInterval(...);   // saqlaymiz; o'zgarishi re-render keltirmaydi
  - oldingi qiymatni eslab qolish (previous value)
  - "birinchi render'mi?" bayroq; render sonini sanash (UI'ga chiqarmasdan)

   ref.current'ni render PAYTIDA o'qima/yozma (UI bilan sinxron emas)  hodisa/effekt ichida
   Qoida: UI'ga TA'SIR qiladigan  useState; ko'rinmaydigan "yon" qiymat  useRef

  MUAMMO: ref oddiy prop kabi bola KOMPONENTGA o'tmaydi (faqat DOM elementga ulanadi):
  <MyInput ref={r} />   // r — MyInput'ning ICHKI <input>'iga qanday yetadi?

  REACT 19 (yangi, sodda) — ref ODDIY PROP:
  function MyInput({ ref, ...props }) {
    return <input ref={ref} {...props} />;   // ref'ni to'g'ridan ichki DOM'ga uzatamiz
  }
  // <MyInput ref={r} />   r.current — ichki <input> DOM elementi

  REACT 18 va oldin — forwardRef bilan o'rash kerak edi:
  const MyInput = forwardRef((props, ref) => {
    return <input ref={ref} {...props} />;   // ref ikkinchi argument sifatida keladi
  });

   Nega kerak: ota komponent bola ichidagi DOM'ga (fokus, skroll) yetishi uchun
   React 19'da forwardRef kerak emas (ref — oddiy prop); eski kodda hali uchraydi (11.12)

  useLayoutEffect — useEffect'ning SINXRON akasi (brauzer chizishdan OLDIN ishlaydi):
  ┌────────────────┬──────────────────────────────┬──────────────────────────┐
  │                │ useEffect                    │ useLayoutEffect          │
  ├────────────────┼──────────────────────────────┼──────────────────────────┤
  │ qachon         │ brauzer chizgandan KEYIN     │ chizishdan OLDIN (sinxron)│
  │ bloklaydimi    │ yo'q (foydalanuvchi ko'radi) │ ha (chizishni kutkazadi) │
  │ qachon kerak   │ deyarli HAMMA holat          │ DOM O'LCHASH  tuzatish   │
  └────────────────┴──────────────────────────────┴──────────────────────────┘

  useLayoutEffect nima uchun: DOM o'lchab (masalan tooltip balandligi), DARHOL joyini
  to'g'rilash kerak bo'lganda — useEffect ishlatilsa, foydalanuvchi "sakrashni" ko'radi:
  useLayoutEffect(() => {
    const { height } = ref.current.getBoundingClientRect();  // DOM'ni o'lcha
    setTooltipTop(-height);                                   // chizishdan OLDIN joyla  sakrash yo'q
  }, []);

   DEFAULT — useEffect; useLayoutEffect faqat "sakrash" (flicker) bo'lsa (u UI'ni sekinlatadi)

  useId — barqaror, noyob ID (label  input bog'lash, SSR mos):
  function Field() {
    const id = useId();                                   // masalan ":r0:"
    return <><label htmlFor={id}>Ism</label><input id={id} /></>;
  }
   useId — LIST key uchun EMAS (u — key emas); a11y (label/input, aria) ID'lari uchun

  ESKI class metodi                YANGI hook ekvivalenti
  ┌────────────────────────────┬──────────────────────────────────────────────┐
  │ componentDidMount()        │ useEffect(() => {...}, [])                     │
  │ componentDidUpdate()       │ useEffect(() => {...}, [dep])   (dep o'zgarsa) │
  │ componentWillUnmount()     │ useEffect(() => { return () => {...} }, [])   │
  │ this.state / setState      │ useState / useReducer 11.6-bob                  │
  │ this.instanceVar (render'siz)│ useRef 2.13-bob                                │
  │ shouldComponentUpdate      │ React.memo + useMemo/useCallback 11.11-bob       │
  └────────────────────────────┴──────────────────────────────────────────────┘

   Bir useEffect = mount + update + unmount BIRGA (class'da 3 ta metod edi — 2.1)
   "Sikl metodi"dek emas, "sinxronlash"dek o'yla 2.8-bob — mapping faqat migratsiya uchun

  ┌─────────────┬──────────────────────────────────────────────────────┐
  │ Hook        │ Qachon ishlatish                                       │
  ├─────────────┼──────────────────────────────────────────────────────┤
  │ useState    │ UI'ga ta'sir qiladigan o'zgaradigan ma'lumot 11.4-bob    │
  │ useEffect   │ tashqi tizim bilan sinxronlash (fetch, taymer, obuna)  │
  │ useContext  │ yarim-global ma'lumot (theme, auth) — drilling'siz     │
  │ useRef      │ DOM kirish YOKI render'siz "yon" qiymat                │
  │ useLayoutEffect│ DOM o'lchash  chizishdan OLDIN tuzatish (2.13b)     │
  │ useId       │ barqaror noyob ID (label/input, a11y — 2.13b)          │
  │ useReducer  │ murakkab/bog'liq state mantiqi 11.6-bob                  │
  │ useMemo     │ qimmat hisobni keshlash (11.6, 11.11)                  │
  │ useCallback │ funksiyani keshlash (11.6, 11.11)                       │
  │ custom hook │ mantiqni qayta ishlatish 11.7-bob                       │
  └─────────────┴──────────────────────────────────────────────────────┘

   Avval ENG SODDA yechim (useState + render'da hisob)  murakkablashsa hook qo'sh
   Hookni "shunchaki" ishlatma — har birining aniq sababi bo'lsin (effekt KERAK EMAS — 2.10)

EFFECT 2.5-bob:     useEffect(() => { ...; return () => {cleanup} }, [deps])
DEPS 2.6-bob:       (yo'q) har render | [] bir marta(mount) | [a,b] a/b o'zgarganda
CLEANUP 2.7-bob:    return () => { clearInterval(id) / unsubscribe() / abort() }
FETCH (Misol 3):  useEffect(() => { let active=true; fetch().then(d => active && setData(d));
                                    return () => { active=false } }, [id])
CONTEXT 2.11-bob:   const Ctx=createContext(def) | <Ctx.Provider value={x}> | useContext(Ctx)
REF DOM 2.12-bob:   const r=useRef(null) | <input ref={r}/> | r.current.focus()
REF QIYMAT 2.13-bob:const r=useRef(0) | r.current = 5   // re-render YO'Q
UPDATER 2.9-bob:    setInterval(() => setX(prev => prev+1), 1000)  // stale closure'dan qochish
LAZY INIT(2.3a):  useState(() => qimmatHisob())   // FAQAT mount'da; useState(fn()) EMAS
ASYNC (2.6a):     useEffect(() => { async function f(){...} f(); return ()=>{} }, [dep])
LAYOUT (2.13b):   useLayoutEffect(() => { o'lcha; joyla }, [])   // chizishdan OLDIN (flicker yo'q)
useId (2.13b):    const id = useId()  | <label htmlFor={id}/> <input id={id}/>
REF PROP (2.13a): function In({ref}){ return <input ref={ref}/> }  // R19; R18: forwardRef

import { useState, useEffect } from "react";

function Welcome() {
  const [message, setMessage] = useState("Yuklanmoqda...");

  useEffect(() => {
    // Bu FAQAT mount'da (birinchi render'dan keyin) ishlaydi ([] — 2.6)
    console.log("Komponent paydo bo'ldi");
    setMessage("Xush kelibsiz!");
  }, []);                                    // bo'sh deps  bir marta

  return <h1>{message}</h1>;
}
//  [] — boshlang'ich sozlash/yuklash uchun; har render'da emas (2.6)

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    console.log("userId o'zgardi:", userId);
    fetchUser(userId).then(setUser);          // userId o'zgarganda qayta yukla
  }, [userId]);                                //  userId deps'da — o'zgarsa effekt qayta ishlaydi

  if (!user) return <p>Yuklanmoqda...</p>;     // shartli render (11.4: 2.12)
  return <h2>{user.name}</h2>;
}
//  userId effekt ichida ishlatildi  deps'da BO'LISHI shart (exhaustive-deps — 2.6)

function Products() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    let ignore = false;                        //  "race condition"dan himoya (eski javobni rad et)
    setLoading(true);
    setError(null);

    fetch("https://api.example.com/products")
      .then(res => {
        if (!res.ok) throw new Error("Server xatosi");
        return res.json();
      })
      .then(json => { if (!ignore) setData(json); })  // faqat hali aktual bo'lsa
      .catch(err => { if (!ignore) setError(err.message); })
      .finally(() => { if (!ignore) setLoading(false); });

    return () => { ignore = true; };           // cleanup: komponent yo'qolsa/qayta yuklansa — eskini rad et
  }, []);                                        // mount'da bir marta

  if (loading) return <Spinner />;             // 3 holat (11.4: 2.12)
  if (error) return <p className="error">{error}</p>;
  return <ul>{data.map(p => <li key={p.id}>{p.name}</li>)}</ul>;
}
//  "ignore" bayrog'i — tez almashgan so'rovlarda eski javob yangisini bosib ketmasligi uchun
//    (haqiqiy loyihada TanStack Query buni avtomatik qiladi — 12.4)

function Clock() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const id = setInterval(() => {
      setTime(new Date());                     // har soniyada yangila
      //  Agar setTime(time) bo'lsa — stale closure (time qotgan). Bu yerda yangi obyekt — muammosiz
    }, 1000);

    return () => clearInterval(id);            //  komponent yo'qolsa — taymerni O'CHIR (leak'dan saqlanish — 2.7)
  }, []);                                        // bir marta o'rnat

  return <p>Vaqt: {time.toLocaleTimeString()}</p>;
}

function WindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    function handleResize() { setWidth(window.innerWidth); }
    window.addEventListener("resize", handleResize);   // obuna

    return () => window.removeEventListener("resize", handleResize); //  cleanup — obunani bekor qil
  }, []);

  return <p>Oyna kengligi: {width}px</p>;
}
//  removeEventListener'da AYNAN o'sha funksiya (handleResize) berilishi shart (anonim emas)

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Bosildi: ${count} marta`;   // DOM (sahifa sarlavhasi)ni state bilan sinxronla
  }, [count]);                                       // count o'zgarganda yangila (sinxronlash — 2.8)

  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}
//  Sarlavha — tashqi tizim (document); useEffect uni count bilan SINXRON ushlaydi (2.8)

function BuggyVsFixed({ userId }) {
  const [user, setUser] = useState(null);

  //  INFINITE LOOP — har render'da yangi obyekt (yangi havola  "o'zgargan"  effekt  render  ...)
  // const config = { id: userId };
  // useEffect(() => { fetchUser(config).then(setUser); }, [config]);

  //  TO'G'RI — primitiv dependency (userId — o'zgargandagina effekt)
  useEffect(() => {
    const config = { id: userId };              // obyektni effekt ICHIDA yarat (deps'da emas)
    fetchUser(config).then(setUser);
  }, [userId]);                                  // primitiv dep — barqaror taqqoslash (2.9)

  return <div>{user?.name}</div>;
}

function AutoCounter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      //  setCount(count + 1) — count MOUNT'dagidek 0 da QOTGAN  har doim 01 (stale closure)
      setCount(prev => prev + 1);              //  updater — prev har doim eng yangi (11.4: 2.6)
    }, 1000);
    return () => clearInterval(id);
  }, []);                                        // [] — effekt bir marta yaratiladi (count qotardi)

  return <h1>{count}</h1>;                       // 0, 1, 2, 3... to'g'ri sanaydi
}
//  Stale closure: effekt [] bilan 1 marta yaratiladi, count o'sha render snapshot'ida.
//    Yechim — updater (prev =>), u React'dan eng yangi qiymatni oladi (deps'ga count qo'shmasdan)

function Cart({ items }) {
  //  KERAK EMAS — total'ni effekt bilan hisoblash (ortiqcha state + render):
  // const [total, setTotal] = useState(0);
  // useEffect(() => { setTotal(items.reduce((s, i) => s + i.price, 0)); }, [items]);

  //  TO'G'RI — render PAYTIDA hisobla (state emas — 11.4: 2.14, 2.10):
  const total = items.reduce((sum, item) => sum + item.price, 0);   // har render'da qayta hisob
  const count = items.length;

  return <p>{count} ta mahsulot — Jami: {total} so'm</p>;
}
//  items'dan KELIB CHIQADIgan narsa — state EMAS, effekt EMAS — to'g'ridan hisobla (2.10)

// src/context/ThemeContext.jsx
import { createContext, useContext, useState } from "react";

const ThemeContext = createContext();          // kontekst yaratamiz

export function ThemeProvider({ children }) {  // o'rovchi (provider) komponent
  const [theme, setTheme] = useState("light");
  const toggle = () => setTheme(t => (t === "light" ? "dark" : "light"));
  return (
    <ThemeContext.Provider value={{ theme, toggle }}>  {/* React 19: <ThemeContext value={...}> */}
      {children}
    </ThemeContext.Provider>
  );
}

export const useTheme = () => useContext(ThemeContext);  // qulay custom hook 11.7-bob

// Ishlatish — istalgan chuqurlikdagi bola (props drilling YO'Q):
function ThemeButton() {
  const { theme, toggle } = useTheme();         // to'g'ridan oladi (oraliq qatlamlar bilmaydi)
  return <button onClick={toggle}>Mavzu: {theme}</button>;
}
// main.jsx: <ThemeProvider><App /></ThemeProvider>   butun App theme'ni o'qiy oladi

const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);

  const login = async (email, password) => {
    const data = await api.login(email, password);  // 12.4
    setUser(data.user);
  };
  const logout = () => setUser(null);

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}
export const useAuth = () => useContext(AuthContext);

// Istalgan komponentda:
function Navbar() {
  const { user, logout } = useAuth();
  return user
    ? <button onClick={logout}>Chiqish ({user.name})</button>   // shartli (11.4: 2.12)
    : <a href="/login">Kirish</a>;
}
//  Auth — klassik Context holati (butun ilovaga kerak, kam o'zgaradigan)

function SearchForm() {
  const inputRef = useRef(null);               // ref yaratamiz

  useEffect(() => {
    inputRef.current.focus();                  // mount'da fokusni inputga qo'y (.current — DOM)
  }, []);

  function clearAndFocus() {
    inputRef.current.value = "";               // DOM'ni to'g'ridan (faqat imperativ holatda)
    inputRef.current.focus();
  }

  return (
    <form>
      <input ref={inputRef} placeholder="Qidirish..." />   {/* ref'ni elementga ulaymiz */}
      <button type="button" onClick={clearAndFocus}>Tozala</button>
    </form>
  );
}
//  Fokus — React deklarativ qila olmaydi  ref bilan imperativ (2.12)

function PreviousValue({ count }) {
  const prevRef = useRef();                     // render'siz qiymat saqlash

  useEffect(() => {
    prevRef.current = count;                    // har render'dan keyin joriy count'ni eslab qol
  }, [count]);                                   // (re-render keltirmaydi — 2.13)

  const prev = prevRef.current;                 // oldingi qiymat (effekt undan oldin o'qildi)
  return <p>Hozir: {count}, oldin: {prev ?? "yo'q"}</p>;
}

function Stopwatch() {
  const [seconds, setSeconds] = useState(0);
  const intervalRef = useRef(null);             // interval ID'ni render'siz saqlaymiz

  const start = () => {
    if (intervalRef.current) return;            // allaqachon ishlayaptimi?
    intervalRef.current = setInterval(() => setSeconds(s => s + 1), 1000);
  };
  const stop = () => {
    clearInterval(intervalRef.current);
    intervalRef.current = null;                 // o'zgarishi re-render keltirmaydi (2.13)
  };

  return (
    <div>
      <p>{seconds}s</p>
      <button onClick={start}>Boshlash</button>
      <button onClick={stop}>To'xtatish</button>
    </div>
  );
}

function LiveSearch() {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!query.trim()) { setResults([]); return; }   // bo'sh bo'lsa — qidirmaymiz

    setLoading(true);
    const controller = new AbortController();         // fetchni bekor qilish uchun (2.7)

    // DEBOUNCE — foydalanuvchi yozishni to'xtatgandan 400ms keyin qidir (har harfda emas)
    const timer = setTimeout(() => {
      fetch(`/api/search?q=${query}`, { signal: controller.signal })
        .then(r => r.json())
        .then(data => { setResults(data); setLoading(false); })
        .catch(err => { if (err.name !== "AbortError") setLoading(false); });
    }, 400);

    return () => {                                    //  cleanup: query o'zgarsa — eski timer va fetchni bekor qil
      clearTimeout(timer);                            // eski debounce taymerni o'chir
      controller.abort();                             // eski so'rovni bekor qil (2.7)
    };
  }, [query]);                                        // query o'zgarganda qayta sinxronlash (2.8)

  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>
  );
}
//  Bu naqsh — debounce + abort + cleanup — real qidiruvning standarti (12.4'da Query soddalashtiradi)

 if (x) { useState(...) }  /  for(...) { useEffect(...) }  (shart/tsikl ichida — 2.2)
 komponent tepasida, shartsiz; shartni hook ICHIDA qo'y

 useEffect(() => { fetch(id) }, [])  (id ishlatildi, deps'da yo'q — eski id — 2.6)
 useEffect(() => { fetch(id) }, [id])  (exhaustive-deps)

 setInterval/addEventListener — cleanup yo'q (memory leak — 2.7)
 return () => clearInterval(id) / removeEventListener(...)

 setInterval(() => setCount(count + 1), 1000)  (count qotgan — 2.9)
 setInterval(() => setCount(c => c + 1), 1000)  (updater)

 useEffect(() => setFull(a + " " + b), [a, b])  (derived state — 2.10)
 const full = a + " " + b  (render'da hisobla)

 const opt = {id}; useEffect(..., [opt])  (har render yangi havola  tsikl — 2.9)
 [id]  (primitiv) yoki obyektni effekt ichida yarat / useMemo (11.6)

 UI'da ko'rinadigan qiymat useRef'da (o'zgarsa ekran yangilanmaydi — 2.13)
 UI'ga ta'sir  useState; render'siz "yon" qiymat  useRef