State boshqarish muammolari — qachon global state kerak

~15 daq · React · State Boshqarish

Muammodan boshlaylik

Internet do'kon. Savatdagi mahsulotlar soni uch joyda kerak:

• Header dagi savat belgisida: 🛒 3
• Mahsulot kartochkasi dagi "Savatga" tugmasida
• Savat sahifasida

Komponentlar daraxti:

App
├── Header
│   └── SavatBelgisi        ← savat kerak
├── Routes
│   ├── Katalog
│   │   └── MahsulotRoyxati
│   │       └── MahsulotKartochka   ← savat kerak
│   └── SavatSahifasi       ← savat kerak
└── Footer

useState ni App da yozib, props orqali pastga uzatish — prop drilling (7-dars): Katalog va MahsulotRoyxati savatni o'zlari ishlatmaydi, faqat uzatadi. Context (18-dars) bu muammoni hal qiladi, lekin savat o'zgarganda butun ilova qayta render bo'ladi.

Endi savol: qaysi state ni global qilish kerak, qaysini — yo'q? Va qaysi vosita bilan?

State ning to'rt turi

Ko'p "state boshqarish" muammolari state ni noto'g'ri turga qo'yishdan kelib chiqadi:

Haqiqiy global client state — ko'pchilik o'ylagandan ancha kam.

Avval tekshiring: bu haqiqatan global state mi?

1. Bu server ma'lumotimi?

// ❌ Server ma'lumotini global store ga yuklash
const useStore = create((set) => ({
  mahsulotlar: [],
  yuklanmoqda: false,
  mahsulotlarniYukla: async () => { ... },
}));

// ✅ TanStack Query — kesh, yangilash, deduplikatsiya bepul
const { data: mahsulotlar } = useMahsulotlar();

Bir necha yil oldin Redux store larining 80% i server ma'lumotlari edi — loading, error, data uchun qo'lda yozilgan reducerlar bilan. TanStack Query paydo bo'lgandan keyin global state ga ehtiyoj keskin kamaydi.

2. Bu URL da bo'lishi kerakmi?

// ❌ Filtr global store da — sahifa yangilansa yo'qoladi, havolani ulashib bo'lmaydi
const kategoriya = useStore((s) => s.kategoriya);

// ✅ URL da — /katalog?kategoriya=kitob&sahifa=2
const [params] = useSearchParams();
const kategoriya = params.get('kategoriya');

Agar foydalanuvchi sahifani yangilaganda yoki havolani do'stiga yuborganda bu holat saqlanishi kerak bo'lsa — u URL da bo'lishi kerak.

3. State ni yaqinroq joyga ko'chirish mumkinmi?

// ❌ Modal holati global
const modalOchiq = useStore((s) => s.modalOchiq);

// ✅ Modal ni ochadigan komponentda
const [ochiq, setOchiq] = useState(false);

State ni uni ishlatadigan komponentlarning eng yaqin umumiy ota-onasida saqlang. Faqat ikki-uch daraja pastga uzatilsa — props yetarli, bu "drilling" emas.

4. Composition yordam beradimi?

// ❌ Layout savatni o'zi ishlatmaydi, faqat uzatadi
<Layout savat={savat}>...</Layout>

// ✅ children orqali — Layout savat haqida bilmaydi
<Layout header={<SavatBelgisi savat={savat} />}>
  ...
</Layout>

30-darsdagi composition prop drilling ning ko'p holatlarini hal qiladi.

[!TIP] Qaror ketma-ketligi: server ma'lumotimi → TanStack Query. URL da saqlanishi kerakmi → URL. Bitta komponentga kerakmi → useState. Bir nechta yaqin komponentga → ota-onaga ko'tarish yoki composition. Faqat shundan keyin — global state.

Context — qachon yetarli

Context (18-dars) — React ning o'zidagi global vosita. U kamdan-kam o'zgaradigan qiymatlar uchun juda yaxshi:

<ThemeContext.Provider value={mavzu}>        // qorong'i/yorug' rejim
<AuthContext.Provider value={foydalanuvchi}> // kim tizimga kirgan
<LocaleContext.Provider value={til}>         // til

Context ning cheklovi

const SavatContext = createContext();

function SavatProvider({ children }) {
  const [savat, setSavat] = useState([]);
  const [promokod, setPromokod] = useState('');
  return (
    <SavatContext.Provider value={{ savat, setSavat, promokod, setPromokod }}>
      {children}
    </SavatContext.Provider>
  );
}

value dagi istalgan narsa o'zgarsa — Context ni ishlatadigan barcha komponentlar qayta render bo'ladi. Promokod yozilayotganda har bir harf SavatBelgisi ni ham, har bir MahsulotKartochka ni ham qayta chizadi — garchi ular faqat savat.length ni ishlatsa ham.

Context da "faqat menga kerakli qismni kuzat" (selektor) imkoniyati yo'q. Buni kontekstlarni bo'lish, useMemo va memo bilan yumshatish mumkin, lekin kod tezda murakkablashadi.

Global state kutubxonalari

Keyingi darslarda — Zustand (57–58) va Redux Toolkit (59–61).

Savat — to'g'ri tahlil

Darsning boshidagi savatni tahlil qilamiz:

• Server ma'lumotimi? Agar foydalanuvchi tizimga kirgan bo'lsa va savat serverda saqlansa — ha, TanStack Query. Mehmon savati faqat brauzerda bo'lsa — yo'q
• URL dami? Yo'q — sahifalar orasida saqlanishi kerak, lekin havolada emas
• Bitta komponentmi? Yo'q — uch xil joyda, daraxtning turli shoxlarida
• Tez-tez o'zgaradimi? Ha — har "Savatga" bosilganda

Natija: mehmon savati — global client state uchun yaxshi nomzod. Zustand bilan — keyingi darsda.

Nima uchun shunday?

Nima uchun ko'p dasturchilar hamma narsani global store ga qo'yadi — va nima uchun bu muammo?

Chunki global state birinchi qarashda qulay: istalgan komponentdan istalgan ma'lumotga yetish mumkin, props uzatish shart emas. Lekin bu qulaylik qimmatga tushadi. Global state — bu global o'zgaruvchi, va global o'zgaruvchilarning muammolari dasturlashda 50 yildan beri ma'lum: kim o'zgartirdi — noma'lum, nima unga bog'liq — noma'lum, komponentni boshqa joyda qayta ishlatib bo'lmaydi, testlash qiyin. Lokal state esa komponent bilan birga tug'iladi va o'ladi — u haqida o'ylash oson. Shuning uchun yaxshi qoida: state ni iloji boricha lokal saqlang va faqat haqiqiy zarurat bo'lganda yuqoriga ko'taring.

Xulosa

Eslab qoling:

• State turlari: lokal UI, server, URL, global client
• Server ma'lumoti — TanStack Query; filtr va sahifa — URL; modal holati — useState
• Avval: state ni yaqin ota-onaga ko'tarish va composition; global — oxirgi qadam
• Context — kamdan-kam o'zgaradigan qiymatlar uchun (mavzu, til, auth); value o'zgarsa barcha iste'molchilar render bo'ladi
• Tez-tez o'zgaradigan global state — Zustand yoki Redux Toolkit (selektorlar bilan)
• Haqiqiy global client state — odatda kam: savat, sozlamalar, auth token

Keyingi dars

57-dars: Zustand — o'rnatish, store yaratish, ishlatish