Chapter 19 — State Management Strategiyasi

Bu bobgacha useState, useReducer va Context'ni alohida-alohida o'rgandik. Endi ularni qachon tanlashni — state management qaror qabul qilish jarayonini ko'rib chiqamiz.

---

19.1 Progression: Local State dan External Library gacha

Diagram

code.text
TEXTNusxalash
01Local State
02   ↓
03Lift State Up
04   ↓
05Context
06   ↓
07useReducer
08   ↓
09External State Libraries (Redux, Zustand, va h.k.)

Simple Explanation

State murakkabligi oshgani sari, yechim ham progressiv ravishda kengayadi — har doim eng murakkab vositadan (masalan Redux) boshlash shart emas.

19.2 Local, Global, Server va UI State

Simple Explanation

• Local state — bitta komponentga tegishli (masalan input qiymati)
• Global state — butun ilova bo'ylab kerak (masalan foydalanuvchi)
• Server state — serverdan kelgan, kesh va sinxronlashni talab qiladigan ma'lumot
• UI state — modal ochiqmi, tab qaysi tanlangan kabi vizual holat

📝 Practice Exercises

🟡 Exercise 1 — Medium

Task: Bergan stsenariylar uchun (savat sonini header'da ko'rsatish, modal ochiq/yopiqligi, API'dan mahsulotlar) qaysi state turini tanlashni asoslang.

🐛 Debugging Challenge

Stsenariy: Loyihada har bir kichik UI holat (masalan "dropdown ochiqmi") uchun Redux store'ga action va reducer qo'shilgan, natijada loyiha keraksiz murakkablashib ketgan.

Your Task: Bu qanday muammo va uni qanday yechish mumkin?

<details> <summary>Solution</summary> Muammo — "over-engineering": oddiy, faqat bitta komponentga tegishli UI holat uchun global state library ishlatilgan. Yechim — bunday holatlar uchun oddiy `useState` yetarli, faqat haqiqatan ham global bo'lgan ma'lumot uchun Redux/Context ishlatish kerak. </details>

📌 Chapter Summary

State management — progressiv qaror: local state'dan boshlab, kerak bo'lganda Context, useReducer va nihoyat tashqi kutubxonalarga o'tish. Local, global, server va UI state — har biri o'z mos yechimiga ega.

🎯 Key Takeaways

• Har doim eng oddiy yechimdan boshlang
• Server state va client state — turli tabiatga ega, turlicha boshqariladi
• Ortiqcha murakkablikni oldindan qo'shmang (YAGNI)

⚡ Quick Cheat Sheet

code.text
TEXTNusxalash
01Bitta komponent uchun     → useState
02Bir nechta bog'liq maydon → useReducer
03Ko'p, uzoq komponentlar   → Context
04Juda murakkab, katta ilova → Redux/Zustand/va h.k.
05Server ma'lumoti          → React Query/SWR kabi maxsus vositalar

---