11.6-bob: useMemo, useCallback, useReducer

  IKKI MUAMMO bu uch hook hal qiladi:

  MUAMMO A — MURAKKAB STATE (useReducer):
  Ko'p bog'liq state + ko'p o'zgartirish usuli = useState'lar tarqoq, chalkash
   useReducer: barcha o'zgarish mantig'i BITTA reducer'da (tartib)

  MUAMMO B — KERAKSIZ QAYTA HISOB / RENDER (useMemo, useCallback):
  Har render'da:
  - qimmat hisob qaytadan bajariladi (1000 element saralash — har marta)
  - yangi obyekt/funksiya yaratiladi (yangi havola  bola keraksiz re-render — 11.5: 2.9)
   useMemo: hisob natijasini KESHLA; useCallback: funksiyani KESHLA

  ┌────────────┬──────────────────────────────────────────────┐
  │ useReducer │ murakkab state mantiqini markazlashtirish     │
  │ useMemo    │ qimmat HISOB natijasini keshlash              │
  │ useCallback│ FUNKSIYA havolasini keshlash (barqaror)       │
  └────────────┴──────────────────────────────────────────────┘

   useReducer — TARTIB uchun; useMemo/useCallback — TEZLIK (referential barqarorlik) uchun

  useState QACHON YETMAYDI:
  - ko'p bog'liq state (loading + data + error + page + filter...)
  - keyingi state oldingisiga murakkab bog'liq (form wizard, savat)
  - bir hodisa BIR NECHA state'ni o'zgartiradi (chalkash setX'lar)

  useReducer G'OYASI — "state o'zgarishini MARKAZLASHTIRISH":
  - barcha o'zgarish mantig'i BITTA funksiyada (reducer)
  - komponent faqat "nima sodir bo'ldi" (action) ni JO'NATADI (dispatch)
  - "qanday o'zgartirish" — reducer'ning ishi

  ┌──────────────────────────────────────────────────────────────┐
  │ Komponent: dispatch({ type: "INCREMENT" })   "nima bo'ldi"   │
  │      │                                                          │
  │      ▼                                                          │
  │ Reducer: (state, action) => newState   "qanday o'zgartirish" │
  │      │                                                          │
  │      ▼                                                          │
  │ Yangi state  re-render                                        │
  └──────────────────────────────────────────────────────────────┘

   useReducer — Redux'ning komponent-ichi modeli (12.2 oson bo'ladi)

  REDUCER — eski state va action olib, YANGI state qaytaradigan SOF funksiya:

  function reducer(state, action) {
    switch (action.type) {                       // action turiga qarab
      case "increment":
        return { ...state, count: state.count + 1 };   // YANGI state (immutable — 11.4: 2.7)
      case "decrement":
        return { ...state, count: state.count - 1 };
      case "set":
        return { ...state, count: action.payload };    // payload — qo'shimcha ma'lumot
      default:
        return state;                            // noma'lum action — state o'zgarmaydi
    }
  }

  QOIDALAR (reducer SOF funksiya bo'lishi shart):
   Faqat state va action'dan YANGI state hisoblaydi (boshqa hech narsa)
   Immutable — eski state'ni mutatsiya QILMAYDI (yangi obyekt — 11.4: 2.7)
   Side effect YO'Q (fetch, taymer, Math.random, Date.now — reducer ichida emas!)

   "Reducer" nomi — Array.reduce'dan (yig'ib boradi: (akkumulyator, element) => yangi akkumulyator)

  DISPATCH — reducer'ga "nima bo'ldi"ni jo'natuvchi funksiya:
  dispatch({ type: "increment" });               // oddiy action (faqat tur)
  dispatch({ type: "add_todo", payload: "Yangi vazifa" });  // ma'lumotli action

  ACTION — sodir bo'lgan hodisani tasvirlovchi OBYEKT:
  {
    type: "add_todo",      // MAJBURIY — qanday o'zgarish (string)
    payload: { ... }       // IXTIYORIY — qo'shimcha ma'lumot (yangi element, id, ...)
  }

  KONVENSIYA:
  - type — aniq, tushunarli nom ("add_todo", "REMOVE_ITEM", "set_filter")
  - payload — o'zgarish uchun kerakli ma'lumot

  KOMPONENTDA (toza — mantiq reducer'da):
  <button onClick={() => dispatch({ type: "increment" })}>+</button>
  <button onClick={() => dispatch({ type: "set", payload: 100 })}>100 qil</button>

   Komponent FAQAT dispatch qiladi (nima bo'ldi); QANDAY o'zgartirish — reducer'da (ajratilgan)

  const [state, dispatch] = useReducer(reducer, initialState);
  //     │       │                     │        │
  //     │       │                     │        └─ boshlang'ich state
  //     │       │                     └─ reducer funksiya 2.3-bob
  //     │       └─ action jo'natuvchi 2.4-bob
  //     └─ joriy state

  TO'LIQ MISOL:
  const initialState = { count: 0 };
  function reducer(state, action) { ... }

  function Counter() {
    const [state, dispatch] = useReducer(reducer, initialState);
    return (
      <>
        <p>{state.count}</p>
        <button onClick={() => dispatch({ type: "increment" })}>+</button>
      </>
    );
  }

  LAZY INIT (3-argument — boshlang'ich state'ni FUNKSIYA bilan hisoblash):
  useReducer(reducer, initialArg, init);   // init(initialArg) faqat 1-render'da
  // masalan: localStorage'dan boshlang'ich o'qish (qimmat — bir marta)

   useState'ga o'xshash: [qiymat, o'zgartiruvchi] — lekin o'zgartiruvchi DISPATCH (action orqali)

  ┌──────────────────────────┬─────────────────┬─────────────────────┐
  │                          │ useState        │ useReducer          │
  ├──────────────────────────┼─────────────────┼─────────────────────┤
  │ Oddiy, mustaqil state    │  ideal        │ ortiqcha            │
  │ Ko'p bog'liq state       │ chalkash        │  ideal            │
  │ Murakkab o'zgartirish    │ tarqoq setX     │  markazlashgan    │
  │ Keyingi state oldingiga  │ qiyin           │  reducer'da aniq  │
  │   bog'liq                │                 │                     │
  │ Sinash (test)            │ qiyinroq        │  oson (sof fn)    │
  │ Debug (kuzatish)         │ tarqoq          │  bitta joy        │
  └──────────────────────────┴─────────────────┴─────────────────────┘

  AMALIY QOIDA:
  - 1-2 oddiy state  useState
  - ko'p bog'liq state YOKI murakkab o'tishlar  useReducer
  - butun ilova bo'ylab  Redux/Zustand (12.2, 12.5)

   useState'dan boshla; murakkablashca useReducer'ga ko'ch (oldindan optimallashtirma)

  MEMOIZATION — funksiya natijasini KESHLASH: bir xil kirish  keshdan javob (qayta hisoblamaslik)

  Oddiy g'oya (React'siz):
  qiymat = qimmatHisob(a, b)   // 1-marta: hisoblanadi (sekin)
  qiymat = qimmatHisob(a, b)   // a, b o'zgarmasa: keshdan (tez)

  REACT'DA MUAMMO: har render'da komponent funksiyasi BOSHIDAN ishlaydi (11.2: 2.2)
  function List({ items }) {
    const sorted = items.slice().sort(...);   //  HAR render'da qaytadan saralanadi (10000 element — sekin!)
    return ...;
  }

  YECHIM — useMemo: natijani keshla, dependency o'zgarmasa qayta hisoblama:
  const sorted = useMemo(() => items.slice().sort(...), [items]);  // items o'zgarmasa — kesh

   Memoization "vaqtni xotiraga almashtirish" (kesh xotira oladi, lekin hisobni tejaydi)
   Faqat QIMMAT hisob uchun (arzon hisobni keshlash — foydasiz, ba'zan zararli — 2.13)

  useMemo(() => qiymat, [deps]) — qiymatni keshlaydi, deps o'zgargandagina qayta hisoblaydi

  const filteredSorted = useMemo(() => {
    console.log("Hisoblanmoqda...");           // faqat deps o'zgarganda ko'rinadi
    return items
      .filter(item => item.active)
      .sort((a, b) => a.price - b.price);
  }, [items]);                                  // items o'zgarmasa — keshdan (qayta hisob yo'q)

  QACHON useMemo (haqiqatan kerak):
   Qimmat hisob (katta massiv filter/sort/reduce, og'ir transformatsiya)
   Referential equality kerak (obyekt/massivni barqaror ushlash — 2.9)

  QACHON KERAK EMAS:
   Arzon hisob (a + b, kichik massiv) — keshlash foydasiz 2.13-bob
   Har render'da baribir o'zgaradigan deps — kesh hech qachon ishlamaydi

   useMemo — KAFOLAT emas, OPTIMIZATSIYA maslahati (React keshni tashlashi mumkin)
   Komponent xulq-atvori useMemo'siz ham BIR XIL bo'lishi kerak (faqat tezlik farqi)

  REFERENTIAL EQUALITY (havola tengligi) — React obyekt/funksiyani === bilan solishtiradi:

  {} === {}              // false! (har obyekt — yangi havola, garchi ichi bir xil)
  [1,2] === [1,2]        // false!
  const fn = () => {};  fn === fn   // true (AYNI havola)

  MUAMMO — har render'da yangi obyekt/funksiya yaratiladi (yangi havola):
  function Parent() {
    const config = { theme: "dark" };           //  HAR render'da YANGI obyekt
    return <Child config={config} />;            //  Child har doim "yangi prop" ko'radi  re-render
  }
  // Yoki useEffect deps'da object  cheksiz effekt (11.5: 2.9)

  YECHIM — useMemo bilan havolani BARQAROR ushlash:
  const config = useMemo(() => ({ theme: "dark" }), []);  // bir xil havola (deps o'zgarmaganda)
  //  Child bir xil prop ko'radi  re-render YO'Q; useEffect deps barqaror  tsikl yo'q

  ┌────────────────────────────────────────────────────────────┐
  │ Primitiv (number/string/bool): qiymat bo'yicha === (oson)   │
  │ Obyekt/massiv/funksiya: HAVOLA bo'yicha === (har yangi=farq)│
  └────────────────────────────────────────────────────────────┘

   Bu — React'ning eng nozik tushunchasi; memo/effect deps shunga tayanadi

  useCallback(fn, [deps]) — FUNKSIYA havolasini keshlaydi (deps o'zgarmaganda bir xil havola)

   Har render'da yangi funksiya (yangi havola — 2.9):
  function Parent() {
    const handleClick = () => console.log("bosildi");   // HAR render'da YANGI havola
    return <MemoChild onClick={handleClick} />;          //  MemoChild re-render (prop "o'zgardi")
  }

   useCallback bilan barqaror havola:
  const handleClick = useCallback(() => console.log("bosildi"), []);  // bir xil havola
  //  MemoChild bir xil onClick ko'radi  re-render YO'Q 2.12-bob

  useCallback === useMemo (funksiya uchun):
  useCallback(fn, deps)  ===  useMemo(() => fn, deps)
  // useCallback funksiyaNING O'ZINI keshlaydi; useMemo funksiya NATIJASINI

  QACHON useCallback:
   Funksiyani React.memo'li bolaga prop sifatida uzatsang 2.12-bob
   Funksiya useEffect/useMemo deps'da bo'lsa (barqaror dep — 11.5: 2.9)
   Funksiya custom hook'dan qaytsa (qayta ishlatiladigan barqaror funksiya)

   Oddiy funksiyani (memo'siz bolaga, deps'siz) useCallback'ga o'rama — foydasiz (2.13)

  ┌──────────────┬────────────────────────────┬──────────────────────────┐
  │              │ useMemo                    │ useCallback              │
  ├──────────────┼────────────────────────────┼──────────────────────────┤
  │ Keshlaydi    │ QIYMAT (hisob natijasi)    │ FUNKSIYANI (havola)      │
  │ Sintaksis    │ useMemo(() => hisob, deps) │ useCallback(fn, deps)    │
  │ Qaytaradi    │ hisob natijasi             │ funksiyaning o'zi        │
  │ Asosiy maqsad│ qimmat hisob + obyekt barqaror│ funksiya havolasi barqaror│
  └──────────────┴────────────────────────────┴──────────────────────────┘

  TENGLIK:  useCallback(fn, deps)  ≡  useMemo(() => fn, deps)

  const sorted = useMemo(() => items.sort(...), [items]);   // NATIJA (massiv)
  const onAdd  = useCallback((x) => dispatch({type:"add", payload:x}), []);  // FUNKSIYA

   useMemo — "natijani keshla"; useCallback — "funksiyani keshla"
   Ikkalasi ham referential barqarorlik 2.9-bob uchun; faqat nima keshlanishi farq qiladi

  RE-RENDER QOIDASI: ota render bo'lsa, BARCHA bolalari ham re-render (11.2: 2.2)
   ba'zan bola props'i O'ZGARMAGAN bo'lsa ham bekorga render bo'ladi

  React.memo — bola props'i O'ZGARMASA, uni RE-RENDER QILMASLIK (keshlangan natija):
  const Child = React.memo(function Child({ name }) {
    console.log("Child render");
    return <p>{name}</p>;
  });
  //  name o'zgarmasa, ota render bo'lsa ham Child render BO'LMAYDI

   LEKIN — React.memo props'ni === bilan solishtiradi 2.9-bob:
  obyekt/funksiya prop HAR render'da yangi havola  memo "o'zgardi" deb o'ylaydi  BEKORGA render
   SHUNING UCHUN useMemo (obyekt prop) + useCallback (funksiya prop) memo bilan BIRGA ishlatiladi:

  const config = useMemo(() => ({...}), []);          // barqaror obyekt
  const onClick = useCallback(() => {...}, []);       // barqaror funksiya
  <MemoChild config={config} onClick={onClick} />;    // endi memo HAQIQATAN ishlaydi

   React.memo + useMemo + useCallback — UCHALASI BIRGA ishlaydi (biri yolg'iz ko'pincha foydasiz)

  ENG KENG XATO: useMemo/useCallback'ni HAMMA joyga tiqishtirish ("tezroq bo'lar")

  HAQIQAT:
  - Memoizatsiya BEPUL emas — kesh xotira oladi, deps har render'da solishtiriladi
  - Arzon hisob/oddiy funksiya uchun — memoizatsiya ZARARLI (foydadan ko'p xarajat)
  - Kod murakkablashadi (o'qish/saqlash qiyinlashadi)

  TO'G'RI YONDASHUV (3 qadam):
  1. AVVAL ODDIY yoz (memoizatsiyasiz)
  2. MUAMMO bormi? — O'LCHA (React DevTools Profiler — 11.11), sezsang
  3. FAQAT o'sha qimmat joyni memoizatsiya qil (maqsadli, dalilga asoslangan)

  QACHON memoizatsiya OQLANADI:
   React.memo'li bolaga obyekt/funksiya prop 2.12-bob
   Haqiqatan qimmat hisob (profiler ko'rsatdi)
   useEffect deps barqarorligi kerak (11.5: 2.9)

   "Premature optimization is the root of all evil" — avval to'g'ri, keyin (kerak bo'lsa) tez
   O'lchamasdan optimallashtirma (taxminga emas, dalilga asoslan)

  REACT COMPILER (2024-2025, React 19 bilan) — memoizatsiyani AVTOMATIK qiladi:

  Eski qo'lda:                          Compiler bilan:
  const x = useMemo(() => f(a), [a]);   const x = f(a);   // compiler O'ZI optimallashtiradi
  const fn = useCallback(() => {}, []);  const fn = () => {};

   Compiler kodingni TAHLIL qilib, qayerda memoizatsiya kerakligini O'ZI aniqlaydi
   useMemo/useCallback'ni QO'LDA yozish ko'p holda KERAK BO'LMAYDI

  HOZIRGI HOLAT (2026):
  - React Compiler barqaror (stable) — yangi loyihalarda tavsiya etiladi
  - LEKIN tushunish SHART: compiler "sehr" emas — u shu bobdagi qoidalarga tayanadi
    (sof komponent, Rules of Hooks, immutability — buzilsa compiler ham yordam berolmaydi)

   Compiler bo'lsa ham — bu bobni BIL: nima bo'layotganini tushunish (debug, eski kod, nazorat)
   Yangi loyiha: compiler'ga ishon; lekin referential equality 2.9-bob tushunchasi BARIBIR kerak

REDUCER 2.3-bob:     function reducer(state, action) { switch(action.type){...} return newState }
useReducer 2.5-bob:  const [state, dispatch] = useReducer(reducer, initialState)
DISPATCH 2.4-bob:    dispatch({ type: "add", payload: data })
useMemo 2.8-bob:     const x = useMemo(() => qimmatHisob(a, b), [a, b])
useMemo OBYEKT2.9-bob:const cfg = useMemo(() => ({ a, b }), [a, b])  // barqaror havola
useCallback(2.10): const fn = useCallback(() => {...}, [deps])
React.memo 2.12-bob: const C = React.memo(function C(props){...})
TENGLIK 2.11-bob:    useCallback(fn, deps) ≡ useMemo(() => fn, deps)
QOIDA 2.13-bob:      avval o'lcha (Profiler)  keyin memoizatsiya (taxminga emas)

import { useReducer } from "react";

// Reducer — komponentdan TASHQARIDA (har render'da qayta yaralmasligi uchun)
function counterReducer(state, action) {
  switch (action.type) {
    case "increment": return { count: state.count + 1 };
    case "decrement": return { count: state.count - 1 };
    case "reset":     return { count: 0 };
    default:          return state;            // noma'lum action — o'zgarmaydi
  }
}

function Counter() {
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

  return (
    <div>
      <p>{state.count}</p>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
      <button onClick={() => dispatch({ type: "reset" })}>Reset</button>
    </div>
  );
}
//  Komponent FAQAT dispatch qiladi; barcha mantiq reducer'da (ajratilgan — 2.4)

function todoReducer(state, action) {
  switch (action.type) {
    case "add":
      return [...state, { id: crypto.randomUUID(), text: action.payload, done: false }];
    case "toggle":
      return state.map(t => t.id === action.payload ? { ...t, done: !t.done } : t);
    case "remove":
      return state.filter(t => t.id !== action.payload);
    case "clear_done":
      return state.filter(t => !t.done);
    default:
      return state;
  }
}

function TodoApp() {
  const [todos, dispatch] = useReducer(todoReducer, []);
  const [input, setInput] = useState("");

  return (
    <div>
      <input value={input} onChange={e => setInput(e.target.value)} />
      <button onClick={() => { dispatch({ type: "add", payload: input }); setInput(""); }}>
        Qo'shish
      </button>
      <ul>
        {todos.map(t => (
          <li key={t.id}>
            <span onClick={() => dispatch({ type: "toggle", payload: t.id })}
                  style={{ textDecoration: t.done ? "line-through" : "none" }}>{t.text}</span>
            <button onClick={() => dispatch({ type: "remove", payload: t.id })}></button>
          </li>
        ))}
      </ul>
      <button onClick={() => dispatch({ type: "clear_done" })}>Bajarilganlarni tozala</button>
    </div>
  );
}
//  11.4 da useState bilan qilgan todo'ni solishtir: bu yerda mantiq BITTA reducer'da (toza, sinaladigan)

const initial = { values: { email: "", password: "" }, errors: {}, submitting: false };

function formReducer(state, action) {
  switch (action.type) {
    case "field":
      return { ...state, values: { ...state.values, [action.name]: action.value } };
    case "errors":
      return { ...state, errors: action.payload };
    case "submit_start":
      return { ...state, submitting: true, errors: {} };
    case "submit_end":
      return { ...state, submitting: false };
    default:
      return state;
  }
}

function LoginForm() {
  const [state, dispatch] = useReducer(formReducer, initial);
  const { values, errors, submitting } = state;

  function handleChange(e) {
    dispatch({ type: "field", name: e.target.name, value: e.target.value });
  }

  return (
    <form>
      <input name="email" value={values.email} onChange={handleChange} />
      {errors.email && <small className="error">{errors.email}</small>}
      <input name="password" type="password" value={values.password} onChange={handleChange} />
      <button disabled={submitting}>{submitting ? "Yuborilmoqda..." : "Kirish"}</button>
    </form>
  );
}
//  Ko'p bog'liq state (values+errors+submitting) — useReducer bilan TARTIBLI (useState bo'lca tarqoq)

function init(initialTodos) {
  const saved = localStorage.getItem("todos");      // qimmat — faqat 1 marta (lazy)
  return saved ? JSON.parse(saved) : initialTodos;
}

function TodoApp() {
  // 3-argument: init funksiya boshlang'ich state'ni hisoblaydi (faqat mount'da)
  const [todos, dispatch] = useReducer(todoReducer, [], init);
  // ...
}
//  init(initialArg) — faqat birinchi render'da (localStorage o'qishni har render takrorlamaydi)

function ProductStats({ products }) {
  //  Qimmat hisob (katta massiv reduce) — har render'da emas, faqat products o'zgapganda
  const stats = useMemo(() => {
    console.log("Statistika hisoblanmoqda...");      // faqat products o'zgapganda ko'rinadi
    return {
      total: products.length,
      avgPrice: products.reduce((s, p) => s + p.price, 0) / products.length,
      maxPrice: Math.max(...products.map(p => p.price)),
    };
  }, [products]);                                      // products o'zgapmasa — keshdan

  return <div>Jami: {stats.total}, O'rtacha: {stats.avgPrice.toFixed(0)}</div>;
}

function Chart({ rawData }) {
  //  const options = { color: "blue", points: rawData };  // har render'da yangi havola
  //    useEffect(() => { drawChart(options); }, [options]); //  cheksiz/har render effekt (11.5: 2.9)

  //  useMemo — options havolasi barqaror (rawData o'zgapmasa bir xil obyekt)
  const options = useMemo(() => ({
    color: "blue",
    points: rawData,
  }), [rawData]);

  useEffect(() => {
    drawChart(options);                                // endi options barqaror  effekt faqat kerak bo'lganda
  }, [options]);                                        // rawData o'zgapgandagina qayta chizadi

  return <canvas id="chart" />;
}
//  useMemo bu yerda HISOB uchun emas, HAVOLA BARQARORLIGI uchun 2.9-bob — asosiy ishlatilish

function SearchableList({ items, query }) {
  // Katta ro'yxat (10000+) filter — query yoki items o'zgapgandagina qayta hisobla
  const filtered = useMemo(() => {
    return items.filter(item =>
      item.name.toLowerCase().includes(query.toLowerCase())
    );
  }, [items, query]);                                  // ikkala dep ham kerak (exhaustive — 11.5: 2.6)

  return <ul>{filtered.map(i => <li key={i.id}>{i.name}</li>)}</ul>;
}
//  Kichik ro'yxat (10-100) bo'lca — useMemo KERAK EMAS (arzon hisob — 2.13). Faqat KATTA da.

// Memoizatsiyalangan bola — props o'zgapmasa render bo'lmaydi
const ExpensiveChild = React.memo(function ExpensiveChild({ onAction, label }) {
  console.log("ExpensiveChild render:", label);
  return <button onClick={onAction}>{label}</button>;
});

function Parent() {
  const [count, setCount] = useState(0);
  const [other, setOther] = useState(0);

  //  const handleAction = () => console.log("action");  // har render yangi  memo foydasiz
  //  useCallback — barqaror havola  ExpensiveChild "other" o'zgapganda render BO'LMAYDI
  const handleAction = useCallback(() => {
    console.log("action bajarildi");
  }, []);                                              // bo'sh deps  har doim bir xil funksiya

  return (
    <div>
      <p>Count: {count}, Other: {other}</p>
      <button onClick={() => setOther(o => o + 1)}>Other +1</button>  {/* bu ExpensiveChild'ni render qilmasin */}
      <ExpensiveChild onAction={handleAction} label="Bajarish" />
    </div>
  );
}
//  useCallback'siz: "Other +1" bossang ExpensiveChild ham render bo'lardi (yangi onAction havolasi)
//    useCallback bilan: ExpensiveChild render BO'LMAYDI (onAction bir xil — memo ishlaydi — 2.12)

function SearchResults({ endpoint }) {
  const [results, setResults] = useState([]);

  // Funksiya barqaror bo'lsin (effekt deps'da ishlatamiz — 11.5: 2.9)
  const fetchResults = useCallback(async () => {
    const res = await fetch(endpoint);
    setResults(await res.json());
  }, [endpoint]);                                      // endpoint o'zgapgandagina yangi funksiya

  useEffect(() => {
    fetchResults();                                    // fetchResults barqaror  effekt faqat endpoint o'zgapganda
  }, [fetchResults]);                                  // funksiya dep (barqaror — tsikl yo'q)

  return <ul>{results.map(r => <li key={r.id}>{r.title}</li>)}</ul>;
}
//  useCallback'siz: fetchResults har render yangi  useEffect har render ishlardi (tsikl xavfi)

function BadExample({ a, b }) {
  //  KERAKSIZ memoizatsiya (arzon hisob — keshlash foydadan zararli):
  const sum = useMemo(() => a + b, [a, b]);          //  a + b — arzon, useMemo ortiqcha
  const greeting = useMemo(() => "Salom", []);        //  konstanta — memoizatsiya kulgili
  const handleClick = useCallback(() => alert(a), [a]); //  memo'siz bolaga — foydasiz

  return <button onClick={handleClick}>{greeting}: {sum}</button>;
}

//  TO'G'RI — oddiy yoz (memoizatsiyasiz):
function GoodExample({ a, b }) {
  const sum = a + b;                                  // arzon — to'g'ridan hisobla
  const handleClick = () => alert(a);                 // oddiy funksiya — o'rash shart emas
  return <button onClick={handleClick}>Salom: {sum}</button>;
}
//  Memoizatsiya — DALILGA asoslangan optimizatsiya (profiler), "har ehtimolga qarshi" emas (2.13)

// useReducer'ni Context bilan birlashtirib, kichik "store" yaratish (Redux'siz)
const CartContext = createContext();

function cartReducer(state, action) {
  switch (action.type) {
    case "add":    return [...state, action.payload];
    case "remove": return state.filter(i => i.id !== action.payload);
    case "clear":  return [];
    default:       return state;
  }
}

export function CartProvider({ children }) {
  const [cart, dispatch] = useReducer(cartReducer, []);
  return (
    <CartContext.Provider value={{ cart, dispatch }}>
      {children}
    </CartContext.Provider>
  );
}
export const useCart = () => useContext(CartContext);

// Istalgan komponentda:
function AddButton({ product }) {
  const { dispatch } = useCart();
  return <button onClick={() => dispatch({ type: "add", payload: product })}>Savatga</button>;
}
//  useReducer + Context = oddiy global store (kichik ilova uchun Redux o'rniga — 12.1, 12.2)

const initial = { search: "", sortBy: "name", page: 1 };

function tableReducer(state, action) {
  switch (action.type) {
    case "search": return { ...state, search: action.payload, page: 1 };  // qidiruvda 1-sahifaga
    case "sort":   return { ...state, sortBy: action.payload };
    case "page":   return { ...state, page: action.payload };
    default:       return state;
  }
}

function DataTable({ data }) {                          // data — katta massiv
  const [state, dispatch] = useReducer(tableReducer, initial);
  const { search, sortBy, page } = state;

  // Qimmat: filter + sort (katta data) — faqat kerakli deps o'zgapganda (2.8)
  const processed = useMemo(() => {
    return data
      .filter(row => row.name.toLowerCase().includes(search.toLowerCase()))
      .sort((a, b) => (sortBy === "price" ? a.price - b.price : a.name.localeCompare(b.name)));
  }, [data, search, sortBy]);

  // Sahifalangan bo'lak (processed yoki page o'zgapganda)
  const pageData = useMemo(() => processed.slice((page - 1) * 10, page * 10), [processed, page]);

  // Barqaror handlerlar (agar memo'li satr komponentiga uzatilca — 2.10)
  const onSearch = useCallback(e => dispatch({ type: "search", payload: e.target.value }), []);

  return (
    <div>
      <input value={search} onChange={onSearch} placeholder="Qidirish" />
      <button onClick={() => dispatch({ type: "sort", payload: "price" })}>Narx bo'yicha</button>
      <ul>{pageData.map(row => <li key={row.id}>{row.name} — {row.price}</li>)}</ul>
      <button onClick={() => dispatch({ type: "page", payload: page - 1 })} disabled={page === 1}>
        Oldingi
      </button>
    </div>
  );
}
//  useReducer (murakkab state) + useMemo (qimmat hisob) + useCallback (barqaror handler) — birga

const ProductCard = React.memo(function ProductCard({ product, onAddToCart }) {
  console.log("ProductCard render:", product.name);
  return (
    <div className="card">
      <h3>{product.name}</h3>
      <button onClick={() => onAddToCart(product.id)}>Savatga</button>
    </div>
  );
});

function Catalog({ products }) {
  const [cart, setCart] = useState([]);
  const [filter, setFilter] = useState("");

  // Barqaror funksiya (memo'li ProductCard uchun — 2.10, 2.12)
  const handleAddToCart = useCallback((id) => {
    setCart(prev => [...prev, id]);                    // updater — prev'ga tayanmaydi (11.4: 2.6)
  }, []);                                              // bo'sh deps  barqaror

  // Barqaror filtrlangan massiv (2.8)
  const visible = useMemo(
    () => products.filter(p => p.name.includes(filter)),
    [products, filter]
  );

  return (
    <div>
      <input value={filter} onChange={e => setFilter(e.target.value)} />
      {visible.map(p => (
        <ProductCard key={p.id} product={p} onAddToCart={handleAddToCart} />  {/* memo ishlaydi */}
      ))}
      <p>Savatda: {cart.length}</p>
    </div>
  );
}
//  filter yozsang — faqat o'zgapgan kartalar render bo'ladi (handleAddToCart barqaror — memo ishlaydi)
//    useCallback yoki React.memo bittasi yetishmasa — hammasi bekorga render bo'lardi (2.12)

// React DevTools Profiler bilan o'lcha 11.11-bob — qaysi komponent qancha render bo'ladi/vaqt oladi
// AVVAL oddiy yoz:
function List({ items }) {
  const sorted = items.slice().sort((a, b) => a.value - b.value);  // memoizatsiyasiz
  return <ul>{sorted.map(i => <li key={i.id}>{i.label}</li>)}</ul>;
}
// Profiler ko'rsatdi: sort 50ms oladi, har render takrorlanadi (items kam o'zgapadi)  ENDI memoizatsiya:
function ListOptimized({ items }) {
  const sorted = useMemo(() => items.slice().sort((a, b) => a.value - b.value), [items]);
  return <ul>{sorted.map(i => <li key={i.id}>{i.label}</li>)}</ul>;
}
//  Tartib: 1) oddiy yoz  2) o'lcha (profiler)  3) faqat qimmat joyni optimallashtir (dalilga — 2.13)

 reducer ichida fetch/Math.random/state mutatsiya (sof emas — 2.3)
 reducer sof: faqat (state, action) => yangi state (immutable)

 5+ bog'liq useState, tarqoq setX'lar (chalkash)
 murakkab bog'liq state  useReducer (markazlashgan — 2.6)

 const opt={...}; <Memo opt={opt}/>  (har render yangi havola  memo foydasiz — 2.9)
 const opt=useMemo(()=>({...}),[deps])  (barqaror havola)

 React.memo'li bolaga oddiy funksiya (har render yangi  memo ishlamaydi — 2.12)
 useCallback bilan barqaror funksiya (memo haqiqatan ishlaydi)

 useMemo(() => a+b, [a,b])  (arzon hisob — ortiqcha — 2.13)
 const sum = a + b  (oddiy; memoizatsiya faqat qimmat/referential uchun)

 useMemo natijasiga to'g'rilik uchun tayanish (React keshni tashlashi mumkin — 2.8)
 useMemo faqat TEZLIK; kod usiz ham bir xil ishlasin