State — dastur yoki componentning ma’lum vaqtdagi xatti-harakati va ko‘rinishiga ta’sir qiladigan o‘zgaruvchan ma’lumotlar to‘plamidir. Formaga kiritilgan matn, tanlangan tab, autentifikatsiya holati, serverdan olingan yozuvlar va loading status state bo‘lishi mumkin. State o‘zgarganda interfeys yoki biznes jarayoni yangi holatga o‘tadi.
Lokal va umumiy state
Local state faqat bitta component yoki kichik daraxtga tegishli. Modal ochiqligi yoki inputning vaqtinchalik qiymati shunga misol. Global state ilovaning uzoq qismlarida kerak bo‘ladigan session, theme yoki umumiy domain ma’lumotini saqlashi mumkin.
Har state’ni global storega joylash bog‘liqlikni oshiradi va lifecycle’ni noaniq qiladi. Ma’lumot imkon qadar ishlatiladigan eng yaqin umumiy parentda saqlanadi. URLdagi route va query ham share qilinadigan hamda browser navigation bilan mos state hisoblanadi.
Server va client state
Server state’ning source of truth backendda. Client uning cache nusxasini, loading, error va freshness holatini boshqaradi. Client state esa foydalanuvchining vaqtinchalik UI tanlovi bo‘lishi mumkin. Bu farq retry, invalidation va synchronization siyosatiga ta’sir qiladi.
Serverdan kelgan ro‘yxatni global obyektga oddiy nusxalash cache invalidation muammosini yashirmaydi. Query key, stale time va mutationdan keyingi yangilash aniq boshqariladi.
Immutable update
Ko‘p UI framework state o‘zgarishini yangi reference orqali aniqlaydi. Obyektni joyida mutate qilish update’ni ko‘rinmas qilishi yoki eski render bilan umumiy qiymatni o‘zgartirishi mumkin. Immutable update eski obyektni saqlab, o‘zgargan qism uchun yangi tuzilma yaratadi.
setUser(current => ({ ...current, name: 'Farrukh' }));
Functional update oldingi state’dan yangi state hisoblaganda stale closure muammosini kamaytiradi. Ketma-ket update’lar batching qilinishi mumkin, shuning uchun setdan keyin state darhol o‘zgardi deb taxmin qilinmaydi.
Derived state
To‘liq ism first va last name’dan, savat jami itemlardan hisoblanadi. Bunday derived qiymatni alohida state sifatida saqlash sinxronlik xatosini keltiradi. U renderda hisoblanadi, qimmat bo‘lsa dependency bo‘yicha memoize qilinadi.
Bir qiymatning ikki mustaqil source of truth’i bo‘lmasligi kerak. Controlled input qiymatni parent state’dan oladi; uncontrolled input ichki DOM holatiga tayanadi. Har modelning ownershipi aniq bo‘ladi.
State machine
Bir nechta boolean o‘zaro mumkin bo‘lmagan kombinatsiya yaratishi mumkin: isLoading, isSuccess va isError bir payt true bo‘lib qoladi. Discriminated state idle | loading | success | error kabi aniq variant beradi. State machine ruxsat etilgan transition va eventlarni belgilaydi.
Async jarayonda oldingi request keyinroq qaytib, yangi natijani ustidan yozishi mumkin. Request ID, cancellation yoki faqat eng so‘nggi natijani qabul qilish race conditionni boshqaradi.
Persistence
State memoryda, URL, local storage, database yoki boshqa saqlashda bo‘lishi mumkin. Barcha UI state’ni persist qilish shart emas. Schema o‘zgarsa eski saqlangan state migratsiya qilinadi. Token va maxfiy ma’lumotni browser storage’da saqlash xavfsizlik modeliga bog‘liq.
Debug va tarix
State transition event nomi bilan loglansa, xato paytida tizim qaysi holatdan qaysisiga o‘tganini ko‘rish osonlashadi. Redux uslubidagi immutable action tarixi time-travel debug imkonini berishi mumkin, lekin katta yoki maxfiy payloadni cheksiz saqlash xotira va privacy muammosidir. Development vositasi productionda foydalanuvchi tokeni yoki shaxsiy ma’lumotni ochmasligi kerak. State bugini qayta yaratish uchun boshlang‘ich state, event ketma-ketligi va async javoblar muhim; faqat yakuniy screenshot sababni ko‘rsatmaydi.
Bog‘liq tushunchalar
component, props, state management, immutable data, state machine, server state, reactivity