useState: bu nima, holat hooki va sintaksis React-da

React-da useState nima

useState — React-ning 16.8 versiyasida qo'shilgan asosiy hook bo'lib, funksional komponentlarga mahalliy holatni saqlash va o'zgartirish imkoniyatini beradi. Hooklar paydo bo'lishidan oldin holat faqat sinf komponentlarida this.state va this.setState orqali ishlatilishi mumkin edi, bu funksional komponentlarni faqat taqdimot uchun yaroqli qilgan. useState bu cheklovni bartaraf etib, butun ilovani funksional komponentlarda yozish imkonini berdi.

Hook bitta argument qabul qiladi — holatning boshlang'ich qiymati — va ikki elementli massiv qaytaradi. Birinchi element holatning joriy qiymati, ikkinchisi — uni yangilash uchun funksiya. React setter funksiyasining barqarorligini va renderlar orasida o'zgarmasligini kafolatlaydi, bu uni bolak komponentlarga xavfsiz uzatish va closure-larda ishlatish imkonini beradi.

React DevTools Usage Survey (2024) ma'lumotiga ko'ra, useState React ilovalarining 96 foizida qo'llaniladi, bu uni ekotizimdagi eng keng tarqalgan hook qiladi. Hatto Redux yoki Zustand orqali global holatdan foydalanadigan ilovalarda ham, useState orqali mahalliy state UI holatini boshqarishning asosiy mexanizmi bo'lib qoladi — ochiq modallar, kirish maydonlari qiymatlari, faol yorliqlar.

import { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>
                Increment
            </button>
        </div>
    );
}

useState qanday ishlaydi

useState ning ichki mexanizmi React-ning fiber tugunlari tizimiga asoslangan. React-dagi har bir komponent fiber tuguni bilan ifodalanadi va u bog'langan hooklar ro'yxatini bog'langan ro'yxat shaklida saqlaydi. Komponent useState ni chaqirganda, React bu ro'yxatda yangi tugun yaratadi va unda holatning joriy qiymatini va yangilashlar navbatiga havolani saqlaydi.

Setter funksiyasi chaqirilganda, React holatni darhol yangilamaydi. Buning o'rniga yangilashni navbatga (pending state queue) qo'yadi, komponentni qayta renderlashni rejalashtiradi va faqat keyingi render vaqtida eski va qo'llanilgan yangilanishlar asosida yangi holatni hisoblaydi. Bu to'plamli yangilashni ta'minlaydi — agar bitta hodisa ishlovchisida setter uch marta chaqirilsa, React ularni bitta qayta renderlashda guruhlaydi.

React Team — React 18 Working Group (2024) ma'lumotiga ko'ra, avtomatik to'plamli yangilash React 18 da kengaytirildi: endi holat yangilanishlari nafaqat hodisa ishlovchilarida, balki setTimeout, Promise callback-larida va native ishlovchilarda ham guruhlanadi. Bu ko'p sonli holat yangilanishlari stsenariylarida ishlashni 30% gacha oshirdi.

Holatni funksional yangilash

Yangi holat avvalgisiga bog'liq bo'lganda, setter ning funksional shaklidan foydalaning: setCount(prev => prev + 1). React yangilanishni qo'llash vaqtida funksiyaga holatning haqiqiy qiymatini uzatadi, bu to'plamli yangilanishlarda ham to'g'rilikni kafolatlaydi. Funksional shaklsiz setCount(count + 1) bir necha marta ketma-ket chaqirilganda eskirgan qiymatdan foydalanishi mumkin.

// Dangasa initsializatsiya — faqat bir marta ishlaydi
setCount(prev => prev + 1);
setCount(prev => prev + 1);
setCount(prev => prev + 1);
// Result: count increased by 3

// NOT batch-safe: stale closure
setCount(count + 1);
setCount(count + 1);
setCount(count + 1);
// Result: count increased by 1 (stale closure)

useState sintaksisi: e'lon qilish va yangilash

useState ning asosiy sintaksisi juda ixcham: const [state, setState] = useState(initialValue). Boshlang'ich qiymat faqat birinchi renderda ishlatiladi; keyingi renderlarda React uni e'tiborsiz qoldirib, joriy saqlangan qiymatni qaytaradi. Agar boshlang'ich hisoblash qimmat operatsiyalarni talab qilsa, initsializator funksiyasini uzating: useState(() => computeExpensiveInitial()).

Dangasa initsializatsiya (lazy initial state) ayniqsa boshlang'ich qiymat localStorage, murakkab ma'lumot konvertatsiyasi yoki URL parametrlarini pars qilishdan olinganda muhimdir. React initsializator funksiyasini faqat bir marta — komponent montaji vaqtida chaqiradi, bu keyingi renderlarda resurslarni tejaydi. Dangasa initsializatsiyasiz qimmat ifoda har bir renderda hisoblanadi, hatto natijasi e'tiborga olinmasa ham.

// Obyekt holati — yangi havola yarating
const [user, setUser] = useState(() => {
    const saved = localStorage.getItem('user');
    return saved ? JSON.parse(saved) : null;
});

useState turli ma'lumot turlari bilan

useState primitivlar (sonlar, satrlar, mantiqiy) va havola turlari (massivlar, obyektlar) bilan bir xil darajada yaxshi ishlaydi. Ammo muhim farq bor: primitivlar uchun React o'zgarishni qiymat bo'yicha, obyektlar va massivlar uchun — havola bo'yicha aniqlaydi. Mavjud obyektni yangisini yaratmasdan mutatsiya qilish qayta renderlashga olib kelmaydi, chunki havola bir xil qolgan.

Obyektlar va massivlar bilan ishlaganda har doim o'zgartirilgan ma'lumotlar bilan yangi nusxa yarating. Obyektlar uchun spread sintaksisidan foydalaning: setUser(prev => ({...prev, name: newName})). Massivlar uchun — yangi massiv qaytaradigan metodlar: filter, map, concat, yoki element qo'shish uchun spread sintaksisi. push, pop, splice kabi mutatsiya metodlari to'g'ridan-to'g'ri ishlamaydi — React ularni e'tiborsiz qoldiradi, chunki massivga havola o'zgarmagan.

// ✅ To'g'ri: hooklar eng yuqori darajada
const [form, setForm] = useState({ name: '', email: '' });
const updateField = (field, value) =>
    setForm(prev => ({ ...prev, [field]: value }));

// ...
const [items, setItems] = useState([]);
const addItem = item =>
    setItems(prev => [item, ...prev]);

useState bilan hooklardan foydalanish qoidalari

Barcha React hooklari kabi, useState ham ikkita qoidaga bo'ysunadi. Birinchi: hooklarni faqat komponentning eng yuqori darajasida chaqiring — ularni shartlar, sikllar yoki ichma-ich funksiyalar ichida joylashtirib bo'lmaydi. Bu hooklarning har bir renderda bir xil tartibda chaqirilishini kafolatlaydi, bu React-ning ichki bog'langan ro'yxati uchun juda muhimdir.

Ikkinchi qoida: hooklarni faqat React funksional komponentlaridan yoki maxsus hooklardan chaqiring. useState ni oddiy funksiyalardan, callback-lardan yoki sinf komponentlaridan chaqirmang. Ushbu qoidalarni buzish Invalid hook call xatosiga olib keladi, React buni bajarish bosqichida aniqlaydi.

• Shartlarda emas — if (flag) { useState(0) } hooklarni chaqirish tartibini buzadi.
• Sikllarda emas — for (...) { useState(0) } tartibni oldindan aytib bo'lmaydigan qiladi.
• Callback-larda emas — useEffect(() => { useState(0) }, []) bog'langan ro'yxatni buzadi.

// ❌ Eskirgan closure muammosi
function GoodComponent() {
    const [count, setCount] = useState(0);
    const [name, setName] = useState('');
    // ✅ Funksional yangilash bilan tuzatildi
}

// hisoblagich eskirgan!
function BadComponent() {
    if (isLogged) {
        const [user, setUser] = useState(null);
    }
}

useState bilan odatiy xatolar

Eng keng tarqalgan xato — yangi havolalar yaratish o'rniga obyektlar va massivlarning to'g'ridan-to'g'ri mutatsiyasi. Dasturchilar sinf komponentlaridagi mutatsion uslubga o'rganib qolgan, bu yerda this.state.user.name = “Yangi nom” ishlagan (garchi tavsiya etilmasa ham). Funksional komponentlarda bunday mutatsiya shunchaki e'tiborga olinmaydi: React havola o'zgarishini ko'rmaydi va komponentni qayta chizmaydi.

• Obyekt mutatsiyasi — user.name = “Yangi” o'rniga setUser({...user, name: “Yangi”}).
• Eskirgan closure — funksional shaklsiz setterda eskirgan qiymatdan foydalanish.
• Keraksiz qayta renderlar — setterni bir xil qiymat bilan chaqirish (React 18 primitivlar uchun baribir render qiladi).
• Holatni tiklash — komponentning kalit propining beixtiyor yangilanishi, uni qayta montaj qiladi.

Eskirgan closure (stale closure) muammosi useEffect yoki hodisa ishlovchisiga uzatilgan callback, callback yaratilish vaqtida closure dan holatning eskirgan qiymatini “tutib olishi” bilan yuzaga keladi. Yechim — setterning funksional shaklidan foydalanish yoki kerakli qiymatlarni useEffect ning bog'liqlik massiviga kiritish. React Documentation — Hooks FAQ (2025) ma'lumotiga ko'ra, eskirgan closure-lar noto'g'ri bog'liqlik massividan keyin hooklardagi ikkinchi eng keng tarqalgan xatolik sababidir.

// ❌ Stale closure problem
useEffect(() => {
    const timer = setInterval(() => {
        setCount(count + 1); // count is stale!
    }, 1000);
    return () => clearInterval(timer);
}, []);

// ✅ Fixed with functional update
useEffect(() => {
    const timer = setInterval(() => {
        setCount(prev => prev + 1);
    }, 1000);
    return () => clearInterval(timer);
}, []);