12.1-bob: Context API (chuqur)

  PROPS DRILLING — ma'lumotni faqat CHUQURDAGI komponentga yetkazish uchun
  har ORALIQ qatlamdan qo'lda uzatish (zerikarli, mo'rt):

  App (user)
   │ props: user
   ▼
  Layout (user) ──────── oraliq (user'ni ishlatmaydi, faqat uzatadi)
   │ props: user
   ▼
  Sidebar (user) ─────── oraliq (user'ni ishlatmaydi)
   │ props: user
   ▼
  UserMenu (user) ────── BU YERDA kerak (lekin 3 qatlam orqali keldi!)

  MUAMMOLAR:
   Oraliq komponentlar keraksiz props oladi (Layout/Sidebar user'ni bilmasin edi)
   Yangi prop qo'shsa — HAR qatlamni o'zgartirish (mo'rt)
   O'qish qiyin (prop qaydan keldi? — 5 fayl orqali)
   Refactoring og'riqli (komponent ko'chsa — drilling buziladi)

   Props drilling — 2-3 qatlamda maqbul; CHUQUR (5+) yoki KENG (ko'p komponent) — Context
   Context — ma'lumotni MANBADAN to'g'ridan consumer'ga (oraliq qatlamlar o'tkaz emas)

  3 QISM (11.5: 2.11 — chuqurroq):

  1. createContext — kontekst "kanali" yaratiladi (default qiymat bilan):
  const ThemeContext = createContext("light");   // default — Provider yo'q bo'lsa ishlatiladi

  2. Provider — ma'lumot MANBASI (qiymatni pastga beradi):
  <ThemeContext.Provider value={theme}>
    {/* bu ichdagi BARCHA komponent theme'ni o'qiy oladi */}
  </ThemeContext.Provider>

  3. useContext — istalgan chuqurlikdan O'QISH (consumer):
  const theme = useContext(ThemeContext);   // eng yaqin Provider'ning value'sini oladi

  ICHKI MEXANIZM (qanday ishlaydi):
  - React har Context uchun ichki "qiymat egasi" (Provider) saqlaydi
  - useContext(Ctx) — komponent daraxtida YUQORIGA qarab eng yaqin Provider'ni topadi
  - Provider value o'zgarsa  React shu Context'ni ishlatgan BARCHA consumer'ni re-render qiladi (2.3)

   useContext eng YAQIN Provider'ni oladi (ichma-ich Provider — ichki g'olib)
   Provider yo'q bo'lsa — createContext'dagi DEFAULT qiymat (yoki null — type-safe — 11.14)

  ENG MUHIM (va eng ko'p tuzoq): Provider value O'ZGARganda — o'sha Context'ni
  ishlatgan BARCHA consumer RE-RENDER bo'ladi (qism o'zgarmagan bo'lsa HAM):

  <AppContext.Provider value={{ user, theme, cart }}>
    <Profile />      user'ni ishlatadi (useContext(AppContext))
    <Header />       theme'ni ishlatadi
    <CartIcon />     cart'ni ishlatadi
  </AppContext.Provider>

  cart O'ZGARDI (faqat cart):
   value obyekti yangi  React: "value o'zgardi"
   Profile, Header, CartIcon — UCHCHOVI ham RE-RENDER (user/theme tegmagan bo'lsa ham!)
   Profile/Header bekorga render (cart ularga aloqasi yo'q)

  IKKI SABAB consumer re-render bo'ladi:
  1. Provider value o'zgardi (har consumer — yangi value oladi)
  2. value REFERENTIAL o'zgardi (har render yangi obyekt — 11.6: 2.9 — eng keng tuzoq)

   Context — SELEKTOR yo'q (value'ning bir QISMINI tinglab bo'lmaydi — hammasi yoki hech narsa)
   Katta/tez o'zgaradigan value  ko'p keraksiz re-render (Context cheklovi — 2.9, Redux/Zustand)

  TUZOQ: Provider value har render YANGI obyekt  consumer'lar HAR render re-render:

   value har render yangi havola (11.6: 2.9):
  function AuthProvider({ children }) {
    const [user, setUser] = useState(null);
    return (
      <AuthContext.Provider value={{ user, setUser }}>   {/* HAR render YANGI obyekt! */}
        {children}                                         {/*  consumer'lar HAR render render */}
      </AuthContext.Provider>
    );
  }

   value'ni useMemo bilan barqarorlashtirish (11.6: 2.9):
  function AuthProvider({ children }) {
    const [user, setUser] = useState(null);
    const value = useMemo(() => ({ user, setUser }), [user]);   // user o'zgargandagina yangi
    return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
  }

  ┌────────────────────────────────────────────────────────────┐
  │ value={{ ... }}: har render yangi  consumer'lar bekor render│
  │ value=useMemo(...): user o'zgargandagina  kerakli render    │
  └────────────────────────────────────────────────────────────┘

   Provider value'ni DOIM useMemo bilan barqaror ushlash (har render yangi obyekt — tuzoq)
   setUser (setState) barqaror — useMemo deps'da kerak emas (faqat user)

  Context'ni TO'G'RIDAN ishlatish o'rniga — custom hook bilan o'rash (11.7, toza):

  //  Har komponentda: useContext(AuthContext) + null tekshiruv (takror)
  //  Custom hook — bir marta o'rab, qulay interfeys + xato himoyasi:
  const AuthContext = createContext(null);

  export function AuthProvider({ children }) {
    const [user, setUser] = useState(null);
    const login = useCallback((u) => setUser(u), []);
    const logout = useCallback(() => setUser(null), []);
    const value = useMemo(() => ({ user, login, logout }), [user, login, logout]);
    return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
  }

  export function useAuth() {                        // custom hook (qulay + xavfsiz)
    const ctx = useContext(AuthContext);
    if (!ctx) throw new Error("useAuth AuthProvider ichida ishlatilishi kerak");   // himoya
    return ctx;
  }

  // Ishlatish — toza:
  const { user, login, logout } = useAuth();        // useContext emas (qulay, type-safe)

   Custom hook — Context'ni o'rab, qulay (useAuth), xavfsiz (null xato), type-safe (11.14)
   Context'ni TO'G'RIDAN export QILMASLIK — custom hook orqali (interfeys nazorati)

  PERFORMANCE NAQSHI: Context'ni bo'lish (re-render kamaytirish — 2.3):

  MUAMMO: bitta Context'da ham STATE, ham UPDATER — state o'zgarganda
          faqat updater'ni ishlatgan komponent ham re-render (keraksiz):

  YECHIM 1 — STATE va DISPATCH'ni alohida Context'ga ajratish:
  const StateContext = createContext(null);      // o'qish (tez-tez o'zgaradi)
  const DispatchContext = createContext(null);   // yozish (HECH o'zgarmaydi — barqaror)

  function Provider({ children }) {
    const [state, dispatch] = useReducer(reducer, initial);
    return (
      <DispatchContext.Provider value={dispatch}>   {/* dispatch barqaror — re-render yo'q */}
        <StateContext.Provider value={state}>
          {children}
        </StateContext.Provider>
      </DispatchContext.Provider>
    );
  }
  //  faqat dispatch'ni ishlatgan komponent (tugma) state o'zgarganda RE-RENDER BO'LMAYDI

  YECHIM 2 — mavzu bo'yicha bo'lish (auth/theme/cart alohida — 11.11: 2.9):
  <AuthContext><ThemeContext><CartContext>...   // cart o'zgarsa — auth/theme consumer tegmaydi

   State + dispatch ajratish — faqat dispatch'ni ishlatgan komponent state'ga reaksiya qilmaydi
   Mavzu bo'yicha bo'lish — bir mavzu o'zgarsa boshqasining consumer'lari tegmaydi

  CONTEXT + useReducer — kichik global state (Redux'siz — 11.6 davomi):

  // reducer (sof — 11.6: 2.3):
  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;
    }
  }

  // Provider (useReducer + Context — state/dispatch ajratilgan — 2.6):
  function CartProvider({ children }) {
    const [cart, dispatch] = useReducer(cartReducer, []);
    return (
      <CartDispatchContext.Provider value={dispatch}>
        <CartStateContext.Provider value={cart}>{children}</CartStateContext.Provider>
      </CartDispatchContext.Provider>
    );
  }

  // Hooklar:
  const cart = useCartState();       // o'qish
  const dispatch = useCartDispatch(); // yozish
  dispatch({ type: "add", payload: product });

  ┌────────────────────────────────────────────────────────────┐
  │ Context + useReducer = "mini-Redux" (markaziy reducer +      │
  │ dispatch + Context ulashish) — kichik ilova uchun yetadi      │
  └────────────────────────────────────────────────────────────┘

   Context + useReducer — Redux'ning kichik modeli (kichik/o'rta ilova — Redux'siz)
   Redux DevTools, middleware, selektor YO'Q — katta bo'lsa Redux/Zustand (2.9)

  MUAMMO: ko'p Provider — ICHMA-ICH "piramida" (provider hell):
  <AuthProvider>
    <ThemeProvider>
      <CartProvider>
        <ToastProvider>
          <App />                  // 4 qatlam ichma-ich (chalkash)
        </ToastProvider>
      </CartProvider>
    </ThemeProvider>
  </AuthProvider>

  YECHIM — Provider'larni BIRLASHTIRISH (compose):
  const providers = [AuthProvider, ThemeProvider, CartProvider, ToastProvider];

  function AppProviders({ children }) {
    return providers.reduceRight(
      (acc, Provider) => <Provider>{acc}</Provider>,   // o'ngdan chapga o'rab boradi
      children
    );
  }
  // <AppProviders><App /></AppProviders>   — yassi, toza

  ┌────────────────────────────────────────────────────────────┐
  │ Provider hell: 5+ ichma-ich (chalkash)  compose (yassi)     │
  │ yoki React Context'ni mantiqiy guruhlash (auth+user birga)  │
  └────────────────────────────────────────────────────────────┘

   Ko'p Provider  compose funksiyasi (ichma-ich piramidadan qochish)
   Yoki bog'liq Context'larni birlashtirish (auth+permissions — bitta Provider)

  CONTEXT'ning YANA BIR muhim ishlatilishi — COMPOUND komponent 11.13-bob:
  bog'liq komponentlar (masalan <Tabs>, <Tabs.List>, <Tabs.Panel>) o'zaro
  holatni PROPS orqali emas, ICHKI Context orqali baham ko'radi:

  <Tabs value={active} onChange={setActive}>   {/* Tabs ichida TabsContext.Provider */}
    <Tabs.List>
      <Tabs.Tab id="a">Birinchi</Tabs.Tab>     {/* ichki Context'dan active/onChange oladi */}
      <Tabs.Tab id="b">Ikkinchi</Tabs.Tab>
    </Tabs.List>
    <Tabs.Panel id="a">...</Tabs.Panel>
  </Tabs>

   Foydalanuvchi <Tabs.Tab>'ga "active"/"onChange" props uzatmaydi (ichki Context uzatadi)
   Bu "ichki" (private) Context — tashqariga export QILINMAYDI (faqat komponent oilasi ishlatadi)

   Compound komponentda Context — komponentlararo aloqa (props drilling'siz — ichki API)
   Bu Context ODATDA memo/split kerak emas (kichik, kam consumer — 11.13'da chuqur)

  CONTEXT PERFORMANCE TUZOQLARI va YECHIMLARI:

  1. value har render yangi  useMemo 2.4-bob
  2. bitta katta Context  bo'lish (state/dispatch, mavzu — 2.6)
  3. tez-tez o'zgaradigan katta state  Context EMAS (selektor yo'q — 2.3)

  SELEKTOR MUAMMOSI: useContext butun value'ni oladi (qismini tinglab bo'lmaydi):
  const { user } = useContext(AppContext);   // theme o'zgarsa ham BU re-render (user kerak edi)

  YECHIMLAR:
   Context'ni bo'lish (har qism alohida — 2.6)
   use-context-selector kutubxonasi (qism tinglash — Context'ga selektor qo'shadi):
    const user = useContextSelector(AppContext, (s) => s.user);   // faqat user o'zgarsa render
   Katta/murakkab state  Zustand 12.5-bob yoki Redux 12.2-bob — TABIIY selektor

  ┌────────────────────────────────────────────────────────────┐
  │ Context: selektor yo'q (butun value)  bo'lish yoki kutubxona│
  │ Zustand/Redux: tabiiy selektor (qism tinglash — afzal kattada)│
  └────────────────────────────────────────────────────────────┘

   Context'ning asosiy cheklovi — SELEKTOR yo'q (qism tinglab bo'lmaydi — 2.3)
   Katta, tez o'zgaradigan state  Zustand/Redux (selektor — kerakli render — 2.10)

  TO'G'RI VOSITANI TANLASH (eng muhim qaror):

  ┌─────────────────────────┬──────────────────────────────────┐
  │ Ehtiyoj                 │ Vosita                            │
  ├─────────────────────────┼──────────────────────────────────┤
  │ Kam o'zgaradigan global │ Context (theme, auth, locale)     │
  │   (theme/auth/i18n)     │ (oddiy, o'rnatilgan — 2.7)        │
  │ Kichik global state     │ Context + useReducer (mini-Redux) │
  │ Katta/murakkab/tez state│ Zustand 12.5-bob yoki Redux 12.2-bob  │
  │   (selektor kerak)      │ (tabiiy selektor — 2.9)           │
  │ SERVER ma'lumoti        │ TanStack Query / RTK Query (12.3/4)│
  │   (API, kesh, sync)     │  Redux/Context EMAS (server ≠ client)│
  │ Forma holati            │ React Hook Form 11.10-bob           │
  │ URL holati (filtr)      │ useSearchParams 11.9-bob            │
  └─────────────────────────┴──────────────────────────────────┘

   ENG KENG XATO: server ma'lumotini (API javobi) Redux/Context'da saqlash
      server ma'lumoti — TanStack Query/RTK Query (kesh/sync avtomatik — 12.4)
   Client state (UI, theme, auth) ≠ Server state (API ma'lumoti) — HAR XIL vosita

  NEXT.JS (13) — Server Components 13.3-bob Context'ni TO'G'RIDAN ISHLATA OLMAYDI:

  - Server Component — server'da render (state/effect/Context yo'q — 13.3)
  - Context — CLIENT mexanizmi (brauzerda — interaktiv)
   Server Component'da useContext ISHLATIB BO'LMAYDI (xato)

  YECHIM (Next.js'da):
   Provider'ni "use client" komponentga o'rab, layout'da ishlatish:
    // providers.tsx
    "use client";
    export function Providers({ children }) { return <ThemeProvider>{children}</ThemeProvider>; }
   Context faqat CLIENT Component'larda (interaktiv qism)
   Server ma'lumoti — Context'da emas, props yoki Server Component'da (13.5)

   Context — client mexanizmi (Next.js Server Component'da ishlamaydi — "use client" kerak)
   13-QISM (Next.js)da Context'ni to'g'ri joylashtirish (client chegarasi) — chuqur

YARATISH 2.2-bob:    const Ctx = createContext(defaultValue | null)
PROVIDER 2.2-bob:    <Ctx.Provider value={value}>{children}</Ctx.Provider>
O'QISH 2.2-bob:      const value = useContext(Ctx)
VALUE MEMO 2.4-bob:  const value = useMemo(() => ({ a, b }), [a, b])
CUSTOM HOOK 2.5-bob: function useX() { const c = useContext(Ctx); if(!c) throw...; return c }
BO'LISH 2.6-bob:     StateContext + DispatchContext (state o'qish / dispatch yozish alohida)
REDUCER 2.7-bob:     useReducer(reducer, initial) + Context'ga state/dispatch ber
COMPOSE 2.8-bob:     providers.reduceRight((acc, P) => <P>{acc}</P>, children)
SELEKTOR 2.9-bob:    useContextSelector(Ctx, s => s.user)  // use-context-selector
QAROR 2.10-bob:      kam o'zgaradiganContext | katta/tezZustand/Redux | serverQuery

import { createContext, useContext, useState, useMemo } from "react";

const ThemeContext = createContext<{ theme: string; toggle: () => void } | null>(null);

export function ThemeProvider({ children }: React.PropsWithChildren) {
  const [theme, setTheme] = useState("light");
  const toggle = () => setTheme((t) => (t === "light" ? "dark" : "light"));
  const value = useMemo(() => ({ theme, toggle }), [theme]);   // barqaror value (2.4)
  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
}

export function useTheme() {
  const ctx = useContext(ThemeContext);
  if (!ctx) throw new Error("useTheme ThemeProvider ichida ishlatilishi kerak");
  return ctx;
}

// Ishlatish:
function ThemeButton() {
  const { theme, toggle } = useTheme();
  return <button onClick={toggle}>Mavzu: {theme}</button>;
}

//  Har render yangi value (consumer'lar har render render):
function BadProvider({ children }: React.PropsWithChildren) {
  const [user, setUser] = useState(null);
  return (
    <AuthContext.Provider value={{ user, setUser }}>   {/* HAR render yangi obyekt! */}
      {children}
    </AuthContext.Provider>
  );
}

//  useMemo bilan barqaror:
function GoodProvider({ children }: React.PropsWithChildren) {
  const [user, setUser] = useState(null);
  const value = useMemo(() => ({ user, setUser }), [user]);   // user o'zgargandagina
  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}
//  Bad: har render  consumer render; Good: user o'zgargandagina (2.4)

import { createContext, useContext, useReducer } from "react";

const CartStateContext = createContext<CartItem[] | null>(null);
const CartDispatchContext = createContext<React.Dispatch<CartAction> | null>(null);

function cartReducer(state: CartItem[], action: CartAction): CartItem[] {
  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 }: React.PropsWithChildren) {
  const [cart, dispatch] = useReducer(cartReducer, []);
  return (
    <CartDispatchContext.Provider value={dispatch}>     {/* dispatch barqaror — re-render yo'q */}
      <CartStateContext.Provider value={cart}>{children}</CartStateContext.Provider>
    </CartDispatchContext.Provider>
  );
}

export function useCart() {
  const ctx = useContext(CartStateContext);
  if (ctx === null) throw new Error("useCart CartProvider ichida");
  return ctx;
}
export function useCartDispatch() {
  const ctx = useContext(CartDispatchContext);
  if (!ctx) throw new Error("useCartDispatch CartProvider ichida");
  return ctx;
}
//  Faqat dispatch'ni ishlatgan tugma — cart o'zgarganda RE-RENDER BO'LMAYDI (2.6)

// Mahsulot qo'shadigan tugma — FAQAT dispatch (state o'qimaydi  cart o'zgarganda render yo'q):
function AddButton({ product }: { product: Product }) {
  const dispatch = useCartDispatch();           // faqat dispatch
  return <button onClick={() => dispatch({ type: "add", payload: product })}>Savatga</button>;
}

// Savat soni — cart'ni o'qiydi (cart o'zgarganda render — to'g'ri):
function CartBadge() {
  const cart = useCart();                        // o'qiydi
  return <span> {cart.length}</span>;
}
//  AddButton dispatch'ni, CartBadge state'ni — ajratilgan (AddButton bekorga render bo'lmaydi)

const providers = [QueryProvider, ThemeProvider, AuthProvider, CartProvider, ToastProvider];

function AppProviders({ children }: React.PropsWithChildren) {
  return providers.reduceRight(
    (acc, Provider) => <Provider>{acc}</Provider>,   // o'ngdan chapga o'rab boradi
    children
  ) as React.ReactElement;
}

// main.tsx:
// <AppProviders><App /></AppProviders>   — ichma-ich piramida o'rniga yassi
//  5 Provider — bitta AppProviders (provider hell'dan qoch — 2.8)

type Lang = "uz" | "ru" | "en";
const translations = {
  uz: { welcome: "Xush kelibsiz", login: "Kirish" },
  en: { welcome: "Welcome", login: "Login" },
  ru: { welcome: "Dobro pojalovat", login: "Vxod" },
};

const I18nContext = createContext<{ lang: Lang; t: (key: string) => string; setLang: (l: Lang) => void } | null>(null);

export function I18nProvider({ children }: React.PropsWithChildren) {
  const [lang, setLang] = useState<Lang>("uz");
  const t = useCallback((key: string) => translations[lang][key] ?? key, [lang]);
  const value = useMemo(() => ({ lang, t, setLang }), [lang, t]);
  return <I18nContext.Provider value={value}>{children}</I18nContext.Provider>;
}
export const useI18n = () => {
  const ctx = useContext(I18nContext);
  if (!ctx) throw new Error("useI18n I18nProvider ichida");
  return ctx;
};

// Ishlatish:
function Header() {
  const { t, setLang } = useI18n();
  return <h1>{t("welcome")}</h1>;   // tilga qarab matn
}

interface Toast { id: string; message: string; type: "success" | "error"; }
const ToastContext = createContext<{ toasts: Toast[]; show: (m: string, t?: "success" | "error") => void } | null>(null);

export function ToastProvider({ children }: React.PropsWithChildren) {
  const [toasts, setToasts] = useState<Toast[]>([]);
  const show = useCallback((message: string, type: "success" | "error" = "success") => {
    const id = crypto.randomUUID();
    setToasts((prev) => [...prev, { id, message, type }]);
    setTimeout(() => setToasts((prev) => prev.filter((t) => t.id !== id)), 3000);   // 3s'da yo'qol
  }, []);
  const value = useMemo(() => ({ toasts, show }), [toasts, show]);
  return (
    <ToastContext.Provider value={value}>
      {children}
      <div className="toast-container">{toasts.map((t) => <div key={t.id} className={t.type}>{t.message}</div>)}</div>
    </ToastContext.Provider>
  );
}
export const useToast = () => useContext(ToastContext)!;
// Ishlatish: const { show } = useToast(); show("Saqlandi", "success");

import { createContext, useContextSelector } from "use-context-selector";

const AppContext = createContext<AppState | null>(null);

// Faqat user o'zgarganda render (theme o'zgarsa — bu render BO'LMAYDI):
function UserName() {
  const user = useContextSelector(AppContext, (state) => state?.user);   // selektor
  return <span>{user?.name}</span>;
}

// Faqat theme o'zgarganda render:
function ThemeIndicator() {
  const theme = useContextSelector(AppContext, (state) => state?.theme);
  return <span>{theme}</span>;
}
//  use-context-selector — Context'ga selektor qo'shadi (qism tinglash — re-render kamayadi — 2.9)
//    Lekin: katta state uchun Zustand 12.5-bob tabiiyroq (built-in selektor)

const ThemeContext = createContext("light");

function App() {
  return (
    <ThemeContext.Provider value="dark">          {/* tashqi: dark */}
      <Header />                                   {/* dark */}
      <ThemeContext.Provider value="light">       {/* ichki: light (g'olib) */}
        <Sidebar />                                {/* light (eng yaqin Provider) */}
      </ThemeContext.Provider>
    </ThemeContext.Provider>
  );
}
//  useContext eng YAQIN Provider'ni oladi (Sidebar  light, Header  dark — 2.2)

// Bitta katta Context — har bo'lak o'zgarsa hamma render (yomon):
const BadContext = createContext<{ user: User; theme: string; cart: Item[] } | null>(null);

// Bo'lingan — har bo'lak alohida (yaxshi):
const UserContext = createContext<User | null>(null);
const ThemeContext = createContext<string>("light");
const CartContext = createContext<Item[]>([]);

function GoodProviders({ children }: React.PropsWithChildren) {
  // har bo'lak alohida Provider — biri o'zgarsa boshqasini ishlatgan komponent tegmaydi
  return (
    <UserProvider><ThemeProvider><CartProvider>{children}</CartProvider></ThemeProvider></UserProvider>
  );
}
//  Bad: cart o'zgarsa user/theme consumer ham render; Good: faqat cart consumer (2.3, 2.6)

// Generic Context yaratuvchi yordamchi (null tekshiruvni bir marta yozish):
function createSafeContext<T>(name: string) {
  const Context = createContext<T | null>(null);
  function useSafeContext() {
    const ctx = useContext(Context);
    if (ctx === null) throw new Error(`use${name} must be used within ${name}Provider`);
    return ctx;
  }
  return [useSafeContext, Context.Provider] as const;
}

// Ishlatish — null tekshiruv avtomatik:
const [useAuth, AuthProviderRaw] = createSafeContext<AuthValue>("Auth");
//  Har Context uchun null tekshiruvni takrorlamaslik (DRY + type-safe — 11.14)

//  NOTO'G'RI — server ma'lumotini Context'da saqlash (qo'lda kesh/sync — og'riq):
function BadUsersProvider({ children }: React.PropsWithChildren) {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  useEffect(() => { fetch("/api/users").then(r => r.json()).then(d => { setUsers(d); setLoading(false); }); }, []);
  //  kesh yo'q, qayta yuklash qo'lda, eskirish boshqarilmaydi (2.10)
  return <UsersContext.Provider value={{ users, loading }}>{children}</UsersContext.Provider>;
}

//  TO'G'RI — server ma'lumoti TanStack Query 12.4-bob:
function UsersList() {
  const { data: users, isLoading } = useQuery({ queryKey: ["users"], queryFn: () => fetch("/api/users").then(r => r.json()) });
  //  kesh, fonda yangilash, qayta urinish AVTOMATIK (12.4)
  if (isLoading) return <Spinner />;
  return <ul>{users.map((u: User) => <li key={u.id}>{u.name}</li>)}</ul>;
}
//  Server ma'lumoti — Query (Context emas); client state (theme/auth) — Context (2.10)

// Global modal boshqaruvi (istalgan joydan ochish):
const ModalContext = createContext<{ open: (content: React.ReactNode) => void; close: () => void } | null>(null);

export function ModalProvider({ children }: React.PropsWithChildren) {
  const [content, setContent] = useState<React.ReactNode>(null);
  const open = useCallback((c: React.ReactNode) => setContent(c), []);
  const close = useCallback(() => setContent(null), []);
  const value = useMemo(() => ({ open, close }), [open, close]);   // open/close barqaror
  return (
    <ModalContext.Provider value={value}>
      {children}
      {content && <Modal onClose={close}>{content}</Modal>}        {/* 11.12 portal */}
    </ModalContext.Provider>
  );
}
export const useModal = () => useContext(ModalContext)!;
// Ishlatish: const { open } = useModal(); open(<ProductForm />);   — istalgan joydan modal

interface AuthValue {
  user: User | null;
  isLoading: boolean;
  login: (email: string, password: string) => Promise<void>;
  logout: () => void;
}
const AuthContext = createContext<AuthValue | null>(null);

export function AuthProvider({ children }: React.PropsWithChildren) {
  const [user, setUser] = useState<User | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {                                  // mount'da token'dan tikla (11.15: 2.5)
    const token = localStorage.getItem("token");
    if (!token) { setIsLoading(false); return; }
    api.get("/auth/me").then((r) => setUser(r.data)).catch(() => localStorage.removeItem("token")).finally(() => setIsLoading(false));
  }, []);

  const login = useCallback(async (email: string, password: string) => {
    const { data } = await api.post("/auth/login", { email, password });
    localStorage.setItem("token", data.token);
    setUser(data.user);
  }, []);
  const logout = useCallback(() => { localStorage.removeItem("token"); setUser(null); }, []);

  const value = useMemo(() => ({ user, isLoading, login, logout }), [user, isLoading, login, logout]);
  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}

export function useAuth() {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error("useAuth AuthProvider ichida ishlatilishi kerak");
  return ctx;
}
//  value memo + custom hook + persist + null tekshiruv — to'liq auth Context (2.4, 2.5)

 value={{ user, setUser }}  (har render yangi  consumer render — 2.4)
 value={useMemo(() => ({ user, setUser }), [user])}

 useContext(Ctx) har komponentda + null tekshiruv (takror)
 custom hook (useAuth — qulay, xavfsiz — 2.5)

 tez-tez o'zgaradigan katta state Context'da (selektor yo'q — ko'p render — 2.3)
 Zustand/Redux (tabiiy selektor — 2.9, 2.10)

 API ma'lumotini Context/Redux'da (qo'lda kesh/sync — 2.10)
 TanStack/RTK Query (avtomatik kesh — 12.4)

 6 Provider ichma-ich piramida (chalkash — 2.8)
 compose funksiyasi (yassi)

 bitta katta Context (har bo'lak hamma'ni render — 2.3)
 bo'lish (state/dispatch, mavzu — 2.6)