11.4-bob: State, hodisalar, shartli render, ro'yxatlar va keys

  MUAMMO: nega oddiy o'zgaruvchi (let count = 0) React'da ishlamaydi?

  function Counter() {
    let count = 0;                         //  oddiy o'zgaruvchi
    return <button onClick={() => {
      count = count + 1;                   // o'zgaradi-yu...
      console.log(count);                  // konsolda 1, 2, 3... (o'zgaryapti)
    }}>{count}</button>;                   // ...lekin EKRAN o'zgarmaydi (0 qoladi)
  }

  2 SABAB:
  1. RE-RENDER YO'Q — oddiy o'zgaruvchini o'zgartirish React'ni "xabardor" qilmaydi
     (React UI'ni qachon yangilashni bilmaydi  ekran eski qoladi)
  2. XOTIRA YO'Q — komponent qayta render bo'lsa, funksiya BOSHIDAN ishlaydi
      let count = 0 yana 0 ga "tiklanadi" (oldingi qiymat yo'qoladi — 11.2: 2.2)

  YECHIM — useState:
  const [count, setCount] = useState(0);   //  React xotirada saqlaydi + re-render qiladi

  const [count, setCount] = useState(0);
  //     │       │                    │
  //     │       │                    └─ boshlang'ich qiymat (faqat BIRINCHI render'da)
  //     │       └─ YANGILOVCHI funksiya (state'ni o'zgartiradi + re-render)
  //     └─ joriy QIYMAT (shu render'dagi state)

  useState QAYTARADI: [qiymat, yangilovchiFunksiya]  (massiv — destructuring bilan olamiz — 2.8 JS)

  NOMLASH KONVENSIYASI: [x, setX] — yangilovchi "set" + bosh harf
  const [name, setName] = useState("");          // string
  const [age, setAge] = useState(0);             // number
  const [isOpen, setIsOpen] = useState(false);   // boolean
  const [user, setUser] = useState(null);        // obyekt (boshlang'ich null)
  const [items, setItems] = useState([]);        // massiv (boshlang'ich bo'sh)

   useState — "hook" (React funksiyasi); FAQAT komponent ICHIDA, TEPADA chaqiriladi (11.5: Rules)
   boshlang'ich qiymat FAQAT birinchi render'da ishlatiladi (keyin e'tiborsiz)

  ENG MUHIM TUSHUNCHA: har render — state'ning "lahzalik surati" (snapshot)
  Har render'da count — O'SHA render uchun QOTGAN qiymat (o'zgarmas konstanta kabi)

  function Counter() {
    const [count, setCount] = useState(0);
    function handleClick() {
      setCount(count + 1);   // count = 0 (BU render'da)  setCount(1)
      setCount(count + 1);   // count HALI HAM 0 (bir xil render)  setCount(1)
      setCount(count + 1);   // count HALI HAM 0  setCount(1)
      // Natija: 3 emas, 1! (count bu render davomida 0 bo'lib QOTGAN)
    }
    return <button onClick={handleClick}>{count}</button>;
  }

  ┌─────────────────────────────────────────────────────────────┐
  │ Render #1: count = 0  (handleClick ichida count har doim 0)  │
  │  setCount(1) uch marta = "keyingi render'da 1 bo'lsin"      │
  │ Render #2: count = 1  (yangi snapshot)                       │
  └─────────────────────────────────────────────────────────────┘

   count o'zgaruvchisi BIR render ichida HECH QACHON o'zgarmaydi (qotgan surat)
   setCount darrov o'zgartirmaydi — "keyingi render uchun" rejalashtiradi (2.5)

  JARAYON (state o'zgardi  ekran yangilandi):

  1. setCount(5) chaqirildi
  2. React: "count state'i 5 bo'ladi" deb belgilaydi (rejalashtiradi)
  3. React komponent funksiyasini QAYTA chaqiradi (re-render)
  4. Bu safar useState 5 ni qaytaradi (yangi snapshot — 2.3)
  5. Yangi JSX hosil bo'ladi  Virtual DOM diffing (11.2: 2.1)
  6. Faqat o'zgargan qism haqiqiy DOM'ga yoziladi  ekran yangilandi

  ┌──────────────┐   setCount   ┌──────────────┐   re-render   ┌──────────┐
  │ state o'zgardi│ ───────────► │ React xabardor│ ───────────► │ yangi UI │
  └──────────────┘              └──────────────┘               └──────────┘

   11.1: 2.9 dagi QO'LDA render() YO'QOLDI — React O'ZI qiladi (UI = f(state))
   Siz faqat "ma'lumot qanday" ni boshqarasiz; "qanday ko'rsatish" — React'da

  setX DARROV o'zgartirmaydi — re-render'ni REJALASHTIRADI (asinxron)
  BATCHING — bir hodisa ichidagi BARCHA setX'lar TO'PLANIB, BITTA re-render qiladi

  function handleClick() {
    setCount(count + 1);     // rejalashtirildi
    setName("Ali");          // rejalashtirildi
    setActive(true);         // rejalashtirildi
    //  React BARCHASINI to'plab, BITTA re-render qiladi (3 ta emas — samarali!)
    console.log(count);      //  HALI ESKI qiymat (re-render hali bo'lgani yo'q)
  }

  ┌────────────────────────────────────────────────────────────┐
  │ 3 ta setX  React kutadi  hammasini birlashtiradi  1 render│
  │ (har setX'da alohida render bo'lganda — 3 marta sekin bo'lardi)│
  └────────────────────────────────────────────────────────────┘

   setX'dan KEYIN darrov state'ni o'qisangiz — ESKI qiymat (yangisi keyingi render'da)
   React 18+ : batching HAMMA joyda (hodisa, promise, setTimeout — avtomatik)

  MUAMMO 2.3-bob: bitta handler'da ketma-ket yangilash count'ni "qotgan" ko'radi

   count'ga tayanish (snapshot — har uchchovi 0 ko'radi):
  setCount(count + 1);   // 0 + 1
  setCount(count + 1);   // 0 + 1 (count hali 0)
  setCount(count + 1);   // 0 + 1  natija: 1 (3 emas!)

   UPDATER FUNKSIYA — React "oldingi" qiymatni beradi (navbatda yangilanadi):
  setCount(prev => prev + 1);   // prev = 0  1
  setCount(prev => prev + 1);   // prev = 1  2  (React navbatda hisoblaydi)
  setCount(prev => prev + 1);   // prev = 2  3   natija: 3 

  QACHON updater (prev =>) ishlatish:
   Yangi qiymat ESKISIGA bog'liq bo'lsa (count + 1, [...prev, x], !prev)
   Bitta handler'da ketma-ket bir necha marta yangilaganda
   Asinxron (setTimeout, promise) ichida yangilaganda (eski snapshot tuzog'idan qochish)

   Qoida: "oldingi qiymatdan kelib chiqsangiz — updater funksiya ishlating"

  QOIDA: state'ni HECH QACHON to'g'ridan o'zgartirma (mutate qilma) — YANGI nusxa yarat

   MUTATSIYA (state'ni joyida o'zgartirish — React buni "ko'rmaydi"):
  const [user, setUser] = useState({ name: "Ali", age: 25 });
  user.age = 26;                  //  obyektni joyida o'zgartirdik
  setUser(user);                  //  AYNI obyekt (havola bir xil)  React: "o'zgarmagan"  re-render YO'Q

   YANGI OBYEKT (spread bilan nusxa + o'zgartirish):
  setUser({ ...user, age: 26 }); // yangi obyekt (yangi havola)  React: "o'zgardi"  re-render 

  NEGA: React eski va yangi state'ni HAVOLA (reference) bo'yicha solishtiradi (===)
  - bir xil havola  "o'zgarmagan" deb hisoblaydi (re-render yo'q)
  - yangi havola  "o'zgargan"  re-render

  ┌────────────────────────────────────────────────────────────┐
  │ Primitiv (number, string, boolean): setX(yangi) — muammosiz │
  │ Obyekt/massiv: HAR DOIM yangi nusxa yarat ({...}, [...])    │
  └────────────────────────────────────────────────────────────┘

   Immutability — React performance (===) va bashoratlilik (predictable) asosi

  YASSI OBYEKT — spread (...) bilan nusxalab, kerakli maydonni almashtir:
  const [form, setForm] = useState({ name: "", email: "", age: 0 });

  setForm({ ...form, name: "Ali" });           // faqat name o'zgardi, qolgani saqlanadi
  setForm(prev => ({ ...prev, age: 26 }));      // updater bilan (xavfsizroq — 2.6)

  ICHMA-ICH (nested) OBYEKT — har QATLAMNI nusxala (chuqurroq):
  const [user, setUser] = useState({
    name: "Ali",
    address: { city: "Toshkent", street: "Navoiy" }
  });
  //  setUser({ ...user, address: { city: "Samarqand" } })  street YO'QOLADI!
  //  ichki obyektni ham nusxala:
  setUser({
    ...user,
    address: { ...user.address, city: "Samarqand" }   // street saqlanadi
  });

   Chuqur ichma-ich state og'riqli  state'ni YASSI tut yoki Immer/useReducer (11.6)
   Dinamik maydon (forma): setForm({ ...form, [e.target.name]: e.target.value }) — 2.11

  QOIDA: massivni MUTATSIYA qiluvchi metodlar TAQIQ (push, pop, splice, sort, reverse)
          ular joyida o'zgartiradi (havola bir xil  re-render yo'q — 2.7)
  RUXSAT: yangi massiv qaytaruvchilar ([...], map, filter, slice, concat)

  const [items, setItems] = useState([{id:1, text:"A"}, {id:2, text:"B"}]);

   QO'SHISH (oxiriga / boshiga):
  setItems([...items, { id: 3, text: "C" }]);        // oxiriga (push o'rniga)
  setItems([{ id: 0, text: "Z" }, ...items]);        // boshiga (unshift o'rniga)

   O'CHIRISH (id bo'yicha — filter):
  setItems(items.filter(item => item.id !== 2));     // id=2 dan tashqari hammasi

   YANGILASH (bitta elementni — map):
  setItems(items.map(item =>
    item.id === 1 ? { ...item, text: "Yangi A" } : item   // id=1 ni almashtir, qolgani o'z holida
  ));

   TARTIBLASH (nusxa olib, keyin sort — original'ni buzmaslik):
  setItems([...items].sort((a, b) => a.text.localeCompare(b.text)));  // [...] nusxa MAJBURIY

   push/splice/sort — original'ni buzadi  AVVAL [...] bilan nusxa ol

  HODISA ULASH — funksiyani UZAT (chaqirma!):
   onClick={handleClick}            // funksiya HAVOLASI (React kerak bo'lganda chaqiradi)
   onClick={handleClick()}          // funksiyani CHAQIRDIK  natijasi prop'ga (render'da darrov ishlaydi!)

  ARGUMENT UZATISH — strelka funksiya bilan o'rab:
   onClick={() => handleDelete(id)} // o'ralgan  bosilganda handleDelete(id) chaqiriladi
   onClick={handleDelete(id)}       // darrov chaqiriladi (render paytida — xato)

  KENG TARQALGAN HODISALAR:
  onClick (tugma) | onChange (input/select) | onSubmit (forma) | onInput
  onKeyDown/onKeyUp (klaviatura) | onMouseEnter/Leave | onFocus/onBlur

  EVENT OBYEKT (SyntheticEvent — React o'rovi):
  function handleChange(e) {
    e.target.value         // input qiymati
    e.preventDefault()     // standart harakatni to'xtat (forma — 2.11)
    e.stopPropagation()    // bubbling'ni to'xtat (11.1: 2.6)
  }

   React hodisasi — SyntheticEvent (barcha brauzerda bir xil ishlaydi; ostida native event)

  CONTROLLED INPUT — input qiymati STATE'da yashaydi (React — "yagona haqiqat manbai"):

  const [name, setName] = useState("");
  <input
    value={name}                          // qiymat state'dan keladi (React boshqaradi)
    onChange={e => setName(e.target.value)} // har bosishda state yangilanadi
  />

  IKKI TOMONLAMA BOG'LANISH (jonli aylana):
  foydalanuvchi yozadi  onChange  setName  re-render  value yangilanadi  ekran

  ┌─────────────────────────────────────────────────────────┐
  │ value (state  input)  +  onChange (input  state)        │
  │  input HAR DOIM state'ni aks ettiradi (sinxron)          │
  └─────────────────────────────────────────────────────────┘

  TURLI INPUT TURLARI:
  text/textarea:  value={x}            onChange={e => setX(e.target.value)}
  checkbox:       checked={x}          onChange={e => setX(e.target.checked)}
  select:         value={x}            onChange={e => setX(e.target.value)}
  number:         value={x}            onChange={e => setX(Number(e.target.value))}

   value bersangiz, onChange ham BERISH SHART (aks holda "read-only" input — yozib bo'lmaydi)
   Controlled — validatsiya, shartli o'chirish, formatlash oson (11.10 RHF buni soddalashtiradi)

  CONTROLLED 2.11-bob: qiymat STATE'da — React "yagona haqiqat manbai" (odatiy tanlov)
  <input value={name} onChange={e => setName(e.target.value)} />

  UNCONTROLLED: qiymat DOM'ning O'ZIDA yashaydi — React tinglamaydi;
                kerak bo'lganda ref orqali O'QIYMIZ (masalan, submit paytida)
  const inputRef = useRef(null);                    // useRef — 11.5
  <input ref={inputRef} defaultValue="Ali" />       // defaultValue (value EMAS), ref
  // submit'da: inputRef.current.value   hozirgi qiymatni O'QIYMIZ

  FARQ:
  controlled    har bosishda re-render; qiymat doim state'da; validatsiya/formatlash oson
  uncontrolled  re-render yo'q; qiymat DOM'da; faqat kerak bo'lganda o'qiladi

   value + onChange = controlled;  defaultValue + ref = uncontrolled (ikkovini ARALASHTIRMA)
   AMALIYOT: deyarli har doim controlled ishlat (bashoratli, boshqariladigan);
     uncontrolled — faqat oddiy holat, uchinchi tomon DOM kutubxonasi, yoki fayl input (<input type="file">)

  1. TERNARY (ikki variant — eng keng):
  {isLoggedIn ? <Profil /> : <Kirish />}

  2. && (faqat bitta holat — "bor yoki yo'q"):
  {error && <p className="error">{error}</p>}      // error bo'lsa ko'rsat, bo'lmasa hech narsa
  {items.length > 0 && <List items={items} />}

  3. ELEMENT O'ZGARUVCHI (murakkab mantiq — return'dan oldin):
  let content;
  if (loading) content = <Spinner />;
  else if (error) content = <Error />;
  else content = <Data data={data} />;
  return <div>{content}</div>;

  4. null QAYTARISH (komponent hech narsa ko'rsatmaslik):
  if (!visible) return null;                        // hech narsa render qilmaydi

   && TUZOG'I — raqam 0:
   {items.length && <List />}   // length=0 bo'lsa  EKRANDA "0" chiqadi! (0 — falsy, lekin render bo'ladi)
   {items.length > 0 && <List />}  // aniq boolean shart
   {!!items.length && <List />}    // yoki boolean'ga majburlash

   if/for JSX {} ICHIDA ishlamaydi (11.2: 2.5)  ternary/&&/element o'zgaruvchi

  RO'YXAT — massivni .map() bilan JSX elementlariga aylantirish:
  {users.map(user => <li key={user.id}>{user.name}</li>)}

  KEY NIMA: React'ga har element uchun BARQAROR, UNIKAL "shaxsiy raqam"
   reconciliation (11.2: 2.2) da qaysi element o'zgardi/qo'shildi/o'chdi — aniqlash uchun

  NEGA INDEX (key={i}) XATO — ro'yxat O'ZGARSA (qo'shilsa/o'chsa/tartiblansa):

  Boshida:  [Olma(i=0), Non(i=1), Sut(i=2)]
  Olma o'chdi  [Non(i=0), Sut(i=1)]
   React: "i=0 element matni Olma'dan Non'ga o'zgardi" deb o'ylaydi (NOTO'G'RI!)
   state aralashadi (input qiymati boshqa qatorga "sakraydi"), noto'g'ri render, bug

  TO'G'RI KEY:
   key={user.id}        // barqaror unikal id (DB'dan, yoki yaratishda crypto.randomUUID())
   key={index}          // ro'yxat o'zgarsa — buziladi (faqat STATIK ro'yxatda mayli)
   key={Math.random()}  //  har render'da YANGI  React hammasini qayta yaratadi (sekin + state yo'qoladi)

   key — JSX prop kabi yozilADI, lekin React ICHIDA ishlatadi (props sifatida kelmaydi)
   key faqat .map() (yoki aka-uka ro'yxat)da kerak; bitta elementga kerak emas

  MUAMMO: ikki aka-uka komponent BIR XIL ma'lumotni ulashishi kerak
          (masalan: qidiruv input va natijalar ro'yxati)

  YECHIM: state'ni ENG YAQIN UMUMIY OTAga "ko'tarish" (lift up)
           ota state'ni saqlaydi, bolalarga props (qiymat) + callback (o'zgartirish) beradi

         App  (state: query)             state shu yerda (umumiy ota)
        /    \
  SearchBar   ResultList
  query={query}      results=filtered(query)    props (qiymat pastga)
  onChange={setQuery}                             callback (xabar yuqoriga — 11.2: 2.10)

  QAYERDA STATE SAQLASH (qoidalar):
  - Faqat BITTA komponent ishlatsa  o'sha komponentda (colocation — yaqin tut)
  - BIR NECHA komponent ulashsa  eng yaqin UMUMIY otada (lift up)
  - BUTUN ilova ulashsa  Context 12.1-bob yoki global store (Redux — 12.2)

   "Single source of truth" — har ma'lumot uchun BITTA egasi (nusxalama)
   State'ni keraksiz yuqoriga ko'tarma (faqat ulashish kerak bo'lganda — aks holda yaqin tut)

  YAXSHI STATE STRUKTURASI — kelajakdagi buglarning yarmini oldini oladi

  1. HISOBLASH MUMKIN BO'LGANNI STATE'DA SAQLAMA (derived state — 2.14):
   const [items] + const [count]  // count = items.length'dan kelib chiqadi (dublikat!)
   const [items] ...  const count = items.length;   // render paytida hisobla

  2. DUBLIKAT/QARAMA-QARSHI STATE'DAN QOCH (bir haqiqat — ikki joyda emas):
   const [items] + const [selectedItem]  // selectedItem — items'dagi obyekt NUSXASI
      item o'zgarsa, ikkovi rassinxron bo'ladi (qaysi biri to'g'ri?)
   const [items] + const [selectedId]    // faqat ID saqla  obyektni items'dan top

  3. BOG'LIQ STATE'LARNI GURUHLA (birga o'zgarsa — bitta obyekt):
  ~ const [x, setX] + const [y, setY]      // kursor pozitsiyasi — doim birga
   const [pos, setPos] = useState({ x: 0, y: 0 });   // guruhlangan (birga yangilanadi)

  4. CHUQUR ICHMA-ICH EMAS, YASSI (flat) TUT 2.8-bob:
   chuqur nested obyekt (yangilash og'riqli)
   yassi struktura yoki id bo'yicha "normallashtirilgan" ({ [id]: item })

   Qoida: MINIMAL, TEKIS, DUBLIKATSIZ state  qolganini HISOBLA

E'LON 2.2-bob:      const [x, setX] = useState(boshlang'ich)
YANGILASH 2.4-bob:  setX(yangiQiymat)   |   setX(prev => prev + 1)  // updater 2.6-bob
LAZY INIT:        useState(() => qimmatHisob())   // funksiya — faqat 1-render'da
OBYEKT 2.8-bob:     setForm({ ...form, name: "Ali" })   |  {...form, [e.target.name]: e.target.value}
MASSIV  2.9-bob:  setItems([...items, yangi])   |  [yangi, ...items]
MASSIV :        setItems(items.filter(i => i.id !== id))
MASSIV :        setItems(items.map(i => i.id === id ? {...i, ...upd} : i))
HODISA 2.10-bob:    onClick={fn}  |  onClick={() => fn(arg)}  |  onChange={e => setX(e.target.value)}
INPUT 2.11-bob:     <input value={x} onChange={e => setX(e.target.value)} />  // controlled
CHECKBOX:         <input type="checkbox" checked={x} onChange={e => setX(e.target.checked)} />
UNCONTROLLED:     <input ref={inputRef} defaultValue="..." />  // qiymat: inputRef.current.value (2.11a)
SHART 2.12-bob:     {cond ? <A/> : <B/>}  |  {cond && <A/>}  |  if(!x) return null
RO'YXAT 2.13-bob:   {arr.map(x => <li key={x.id}>{x.name}</li>)}   // unikal key

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);          // state e'lon (boshlang'ich 0)

  return (
    <div>
      <p>Hisob: {count}</p>                        {/* state'ni ko'rsatamiz */}
      <button onClick={() => setCount(count + 1)}>+1</button>  {/* state'ni oshiramiz */}
      <button onClick={() => setCount(count - 1)}>-1</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}
//  setCount  re-render  yangi count  ekran yangilanadi (UI = f(state)). render() YO'Q!

function App() {
  //  Har render'da ishlaydi (lekin natija faqat 1-marta kerak — isrof):
  // const [data] = useState(qimmatHisob());

  //  FUNKSIYA bersang — React uni FAQAT birinchi render'da chaqiradi (lazy):
  const [data, setData] = useState(() => {
    const saved = localStorage.getItem("data");   // qimmat: localStorage o'qish
    return saved ? JSON.parse(saved) : [];         // faqat 1-render'da bajariladi
  });

  return <div>{data.length} ta element</div>;
}
//  useState(qiymat) — qiymat har render'da hisoblanadi; useState(() => qiymat) — faqat 1-marta

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

  function handleTriple() {
    setCount(count + 1);     // count = 0  setCount(1)
    setCount(count + 1);     // count HALI 0 (snapshot)  setCount(1)
    setCount(count + 1);     // count HALI 0  setCount(1)
    //  Natija: 1 (3 emas!) — count bu render davomida 0 bo'lib QOTGAN (2.3)
  }

  return <button onClick={handleTriple}>{count} — uchta +1</button>;
}
//  Bu — "nega yangilanmayapti" tuzog'ining ildizi. Yechim — Misol 4 (updater)

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

  function handleTriple() {
    setCount(prev => prev + 1);   // prev = 0  1
    setCount(prev => prev + 1);   // prev = 1  2  (React navbatda beradi)
    setCount(prev => prev + 1);   // prev = 2  3   Natija: 3 
  }

  // Asinxron holatda ham updater shart (snapshot eskiradi):
  function handleDelayed() {
    setTimeout(() => setCount(prev => prev + 1), 1000);  // 1s keyin — prev har doim yangi
  }

  return (
    <>
      <button onClick={handleTriple}>{count} — +3</button>
      <button onClick={handleDelayed}>Kechikkan +1</button>
    </>
  );
}

function ProfileForm() {
  const [form, setForm] = useState({ name: "", email: "", age: 0 });

  // Bitta universal handler — barcha maydonlar uchun (dinamik maydon nomi — 2.11)
  function handleChange(e) {
    const { name, value } = e.target;
    setForm(prev => ({ ...prev, [name]: value }));  // [name] — computed property (qaysi maydon?)
  }

  return (
    <form>
      <input name="name" value={form.name} onChange={handleChange} placeholder="Ism" />
      <input name="email" value={form.email} onChange={handleChange} placeholder="Email" />
      <input name="age" type="number" value={form.age} onChange={handleChange} />
      <pre>{JSON.stringify(form, null, 2)}</pre>      {/* state'ni jonli ko'rsatamiz */}
    </form>
  );
}
//  Bitta handleChange — barcha inputlarni boshqaradi (name atributi orqali ajratiladi)

function Settings() {
  const [user, setUser] = useState({
    name: "Ali",
    address: { city: "Toshkent", street: "Navoiy" },   // ichma-ich obyekt
  });

  function updateCity(city) {
    setUser(prev => ({
      ...prev,                                   // tashqi qatlam nusxasi
      address: { ...prev.address, city },        // ichki qatlam HAM nusxalanadi (street saqlanadi)
    }));
  }
  //  { ...prev, address: { city } } bo'lsa — street YO'QOLADI! (2.8)

  return (
    <div>
      <p>{user.name} — {user.address.city}, {user.address.street}</p>
      <button onClick={() => updateCity("Samarqand")}>Shaharni o'zgartir</button>
    </div>
  );
}

function TodoList() {
  const [todos, setTodos] = useState([
    { id: 1, text: "React o'rganish" },
    { id: 2, text: "Loyiha qilish" },
  ]);
  const [input, setInput] = useState("");

  function addTodo() {
    if (!input.trim()) return;                     // bo'sh bo'lmasin
    const newTodo = { id: crypto.randomUUID(), text: input };  // unikal id (2.13)
    setTodos([...todos, newTodo]);                 //  oxiriga (push o'rniga — 2.9)
    setInput("");                                  // inputni tozala
  }

  function removeTodo(id) {
    setTodos(todos.filter(t => t.id !== id));       //  id bo'yicha o'chir (filter — 2.9)
  }

  return (
    <div>
      <input value={input} onChange={e => setInput(e.target.value)} />
      <button onClick={addTodo}>Qo'shish</button>
      <ul>
        {todos.map(todo => (                        // ro'yxat (2.13)
          <li key={todo.id}>                        {/* unikal key (id) */}
            {todo.text}
            <button onClick={() => removeTodo(todo.id)}></button>  {/* argument uzatish — 2.10 */}
          </li>
        ))}
      </ul>
    </div>
  );
}

function TaskList() {
  const [tasks, setTasks] = useState([
    { id: 1, text: "Sport", done: false },
    { id: 2, text: "O'qish", done: true },
  ]);

  function toggleDone(id) {
    setTasks(tasks.map(task =>                      // map — bitta elementni almashtirish
      task.id === id
        ? { ...task, done: !task.done }             // mosini: done'ni teskari qil (yangi obyekt)
        : task                                       // qolganini o'z holida (o'zgartirmaymiz)
    ));
  }

  return (
    <ul>
      {tasks.map(task => (
        <li key={task.id} style={{ textDecoration: task.done ? "line-through" : "none" }}>
          <input type="checkbox" checked={task.done} onChange={() => toggleDone(task.id)} />
          {task.text}
        </li>
      ))}
    </ul>
  );
}
//  map ichida mos kelmaganlarni O'ZGARTIRMASDAN qaytaramiz (faqat keraklisini yangilaymiz)

function RegistrationForm() {
  const [name, setName] = useState("");                  // text
  const [agree, setAgree] = useState(false);             // checkbox
  const [role, setRole] = useState("user");              // select
  const [age, setAge] = useState(18);                    // number

  return (
    <form>
      {/* text */}
      <input value={name} onChange={e => setName(e.target.value)} placeholder="Ism" />

      {/* checkbox — checked + e.target.checked (boolean) */}
      <label>
        <input type="checkbox" checked={agree} onChange={e => setAgree(e.target.checked)} />
        Shartlarga roziman
      </label>

      {/* select — value + e.target.value */}
      <select value={role} onChange={e => setRole(e.target.value)}>
        <option value="user">Foydalanuvchi</option>
        <option value="admin">Admin</option>
      </select>

      {/* number — Number() bilan o'girish */}
      <input type="number" value={age} onChange={e => setAge(Number(e.target.value))} />

      {/* tugma faqat rozi bo'lsa faol (shartli o'chirish — controlled kuchi) */}
      <button disabled={!agree}>Ro'yxatdan o'tish</button>
    </form>
  );
}

function LoginForm() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");

  function handleSubmit(e) {
    e.preventDefault();                              //  sahifa qayta yuklanishini to'xtat (11.1: 2.6)
    if (!email.includes("@")) {
      setError("Email noto'g'ri");                   // shartli xato (2.12 da ko'rsatamiz)
      return;
    }
    setError("");
    console.log("Kirish:", { email, password });     // bu yerda API chaqiruvi (12.4)
  }

  return (
    <form onSubmit={handleSubmit}>                    {/* onSubmit — formaga, tugmaga emas */}
      <input value={email} onChange={e => setEmail(e.target.value)} placeholder="Email" />
      <input type="password" value={password} onChange={e => setPassword(e.target.value)} />
      {error && <p className="error">{error}</p>}     {/* shartli render (&&) — 2.12 */}
      <button type="submit">Kirish</button>
    </form>
  );
}

function DataView({ loading, error, data }) {
  // 1. Element o'zgaruvchi (ko'p holat — eng toza)
  let content;
  if (loading) content = <Spinner />;
  else if (error) content = <p className="error">Xato: {error}</p>;
  else if (data.length === 0) content = <p>Ma'lumot yo'q</p>;
  else content = <ul>{data.map(d => <li key={d.id}>{d.name}</li>)}</ul>;

  return (
    <div>
      {content}                                       {/* 1. o'zgaruvchi */}

      {/* 2. ternary (ikki variant) */}
      {loading ? <small>Yuklanmoqda...</small> : <small>Tayyor</small>}

      {/* 3. && (bor-yo'q) — TO'G'RI boolean shart (length > 0, raqam 0 tuzog'i — 2.12) */}
      {data.length > 0 && <p>Jami: {data.length} ta</p>}

      {/*  {data.length && ...} bo'lsa — 0 da ekranda "0" chiqardi 2.12-bob */}
    </div>
  );
}

// Bola 1 — qidiruv input (state'ni o'zi saqlamaydi, otadan oladi)
function SearchBar({ query, onQueryChange }) {
  return (
    <input value={query} onChange={e => onQueryChange(e.target.value)} placeholder="Qidirish..." />
  );
}

// Bola 2 — natijalar (otadan filtrlangan ma'lumot oladi)
function ResultList({ results }) {
  return <ul>{results.map(r => <li key={r.id}>{r.name}</li>)}</ul>;
}

// Ota — state SHU YERDA (umumiy ota), ikki bolaga ulashadi
function SearchPage({ products }) {
  const [query, setQuery] = useState("");            // state ko'tarildi (lifted up)
  const filtered = products.filter(p =>              // query bo'yicha filtr (render paytida hisob)
    p.name.toLowerCase().includes(query.toLowerCase())
  );

  return (
    <div>
      <SearchBar query={query} onQueryChange={setQuery} />  {/* qiymat + callback pastga */}
      <ResultList results={filtered} />                      {/* hisoblangan natija pastga */}
    </div>
  );
}
//  query — BITTA egasi (SearchPage); ikki bola uni ulashadi (single source of truth — 2.14)

function Accordion({ title, children }) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="accordion">
      <button onClick={() => setIsOpen(prev => !prev)}>   {/* toggle — updater 2.6-bob */}
        {title} {isOpen ? "▲" : "▼"}                        {/* ternary belgi 2.12-bob */}
      </button>
      {isOpen && <div className="content">{children}</div>} {/* && — ochiq bo'lsa ko'rsat 2.12-bob */}
    </div>
  );
}
//  setIsOpen(prev => !prev) — eskiga bog'liq  updater 2.6-bob; ikki marta bossang to'g'ri ishlaydi

function ProductBoard({ products }) {
  const [search, setSearch] = useState("");
  const [sortBy, setSortBy] = useState("name");      // "name" yoki "price"

  // Hisoblangan qiymat — state'da SAQLAMAYMIZ (render paytida hosil — single source)
  const visible = products
    .filter(p => p.name.toLowerCase().includes(search.toLowerCase()))   // filtr
    .sort((a, b) =>                                   // saralash (yangi massivda — filter nusxa bergan)
      sortBy === "price" ? a.price - b.price : a.name.localeCompare(b.name)
    );

  return (
    <div>
      <input value={search} onChange={e => setSearch(e.target.value)} placeholder="Qidirish" />
      <select value={sortBy} onChange={e => setSortBy(e.target.value)}>
        <option value="name">Nom bo'yicha</option>
        <option value="price">Narx bo'yicha</option>
      </select>
      {visible.length > 0 ? (                          // shartli render (ternary — 2.12)
        <ul>{visible.map(p => <li key={p.id}>{p.name} — {p.price}</li>)}</ul>
      ) : (
        <p>Hech narsa topilmadi</p>
      )}
    </div>
  );
}
//  "visible" — state EMAS (search/sortBy'dan KELIB CHIQADI). Hosilani state'da saqlama 11.5-bob!

function TaskApp() {
  const [tasks, setTasks] = useState([]);            // ro'yxat (massiv state)
  const [input, setInput] = useState("");            // input (controlled)
  const [filter, setFilter] = useState("all");       // filtr: all/active/done

  function addTask() {
    if (!input.trim()) return;
    setTasks(prev => [...prev, { id: crypto.randomUUID(), text: input, done: false }]);  //  updater
    setInput("");
  }
  const toggle = id => setTasks(prev => prev.map(t => t.id === id ? { ...t, done: !t.done } : t)); // 
  const remove = id => setTasks(prev => prev.filter(t => t.id !== id));                            // 

  // Hisoblangan: filtrlangan ro'yxat (state EMAS — tasks/filter'dan)
  const visible = tasks.filter(t =>
    filter === "all" ? true : filter === "done" ? t.done : !t.done
  );

  return (
    <div>
      <input value={input} onChange={e => setInput(e.target.value)}
             onKeyDown={e => e.key === "Enter" && addTask()} />   {/* Enter bilan ham — 2.10 */}
      <button onClick={addTask}>Qo'shish</button>

      <div>
        {["all", "active", "done"].map(f => (         // filtr tugmalari (ro'yxat — key)
          <button key={f} onClick={() => setFilter(f)}
                  style={{ fontWeight: filter === f ? "bold" : "normal" }}>{f}</button>
        ))}
      </div>

      {visible.length === 0 && <p>Vazifa yo'q</p>}     {/* shartli (&&) — 2.12 */}
      <ul>
        {visible.map(task => (                          // ro'yxat (key — 2.13)
          <li key={task.id}>
            <input type="checkbox" checked={task.done} onChange={() => toggle(task.id)} />
            <span style={{ textDecoration: task.done ? "line-through" : "none" }}>{task.text}</span>
            <button onClick={() => remove(task.id)}></button>
          </li>
        ))}
      </ul>
      <p>Jami: {tasks.length} | Bajarilgan: {tasks.filter(t => t.done).length}</p>
    </div>
  );
}
//  11.1: 2.9 dagi QO'LDA render() butunlay YO'Q — faqat state'ni o'zgartiramiz, React qoladi (UI=f(state))

 let count = 0; count++  (re-render yo'q, render'da tiklanadi — 2.1)
 const [count, setCount] = useState(0); setCount(count + 1)

 setCount(count+1); setCount(count+1)  (snapshot — natija +1 — 2.3)
 setCount(p => p+1); setCount(p => p+1)  (updater — natija +2 — 2.6)

 user.age = 26; setUser(user)  /  items.push(x); setItems(items)  (mutatsiya — re-render yo'q — 2.7)
 setUser({...user, age:26})  /  setItems([...items, x])  (yangi nusxa)

 onClick={handleClick()}  (darrov chaqiriladi — render'da — 2.10)
 onClick={handleClick}  yoki  onClick={() => handleClick(id)}

 <input value={name} />  (onChange yo'q — read-only, yozib bo'lmaydi — 2.11)
 <input value={name} onChange={e => setName(e.target.value)} />

 {items.length && <List/>}  (0 da ekranda "0" — 2.12)
 {items.length > 0 && <List/>}  (aniq boolean)

 key={index}  yoki  key={Math.random()}  (ro'yxat o'zgarsa buziladi — 2.13)
 key={item.id}  (barqaror unikal id)

 const [filtered, setFiltered] = useState([]); ... (search o'zgarsa qo'lda sinxronlash — 11.1: 2.9 qaytadi)
 const filtered = items.filter(...)  (render paytida hisobla — Misol 14)