useState: bu nədir, vəziyyət hooku və React-də sintaksis

React-də useState nədir

useState — React-in 16.8 versiyasında əlavə edilmiş əsas hookdur və funksional komponentlərə lokal vəziyyəti saxlamaq və dəyişmək imkanı verir. Hookların meydana gəlməsindən əvvəl vəziyyət yalnız sinif komponentlərində this.state və this.setState vasitəsilə istifadə oluna bilərdi, bu da funksional komponentləri yalnız prezentasiya üçün yararlı edirdi. useState bu məhdudiyyəti aradan qaldıraraq bütün tətbiqi funksional komponentlər üzərində yazmağa imkan verdi.

Hook bir arqument qəbul edir — vəziyyətin ilkin dəyəri — və iki elementli massiv qaytarır. Birinci element vəziyyətin cari dəyəri, ikincisi isə onu yeniləmək üçün funksiyadır. React setter funksiyasının sabit olduğunu və renderlər arasında dəyişmədiyini təmin edir ki, bu da onu uşaq komponentlərə təhlükəsiz şəkildə ötürməyə və closure-larda istifadə etməyə imkan verir.

React DevTools Usage Survey (2024) məlumatına görə, useState React tətbiqlərinin 96%-də istifadə olunur və bu onu ekosistemdə ən geniş yayılmış hook edir. Hətta Redux və ya Zustand vasitəsilə qlobal vəziyyətdən istifadə edən tətbiqlərdə belə, useState vasitəsilə lokal state UI vəziyyətini idarə etmək üçün əsas mexanizm olaraq qalır — açıq modallar, giriş sahələrinin dəyərləri, aktiv tablar.

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 necə işləyir

useState-in daxili mexanizmi React-in fiber qovşaqlar sisteminə əsaslanır. React-də hər bir komponent fiber qovşağı ilə təmsil olunur və o, əlaqəli hookların siyahısını bağlı siyahı şəklində saxlayır. Komponent useState çağırdıqda, React bu siyahıda yeni qovşaq yaradır və orada vəziyyətin cari dəyərini və yeniləmələr növbəsinə istinadı saxlayır.

Setter funksiyası çağırıldıqda, React vəziyyəti dərhal yeniləmir. Bunun əvəzinə yeniləməni növbəyə (pending state queue) qoyur, komponentin yenidən renderini planlaşdırır və yalnız növbəti render zamanı köhnə və tətbiq edilmiş yeniləmələr əsasında yeni vəziyyəti hesablayır. Bu, toplu yeniləməni təmin edir — əgər bir hadisə idarəedicisində setter üç dəfə çağırılsa, React onları bir yenidən renderdə qruplaşdırır.

React Team — React 18 Working Group (2024) məlumatına görə, avtomatik toplu yeniləmə React 18-də genişləndirildi: indi vəziyyət yeniləmələri təkcə hadisə idarəedicilərində deyil, həm də setTimeout, Promise callback-lərində və native idarəedicilərdə qruplaşdırılır. Bu, çoxsaylı vəziyyət yeniləməsi ssenarilərində performansı 30%-ə qədər artırdı.

Vəziyyətin funksional yenilənməsi

Yeni vəziyyət əvvəlkindən asılı olduqda, setter-in funksional formasından istifadə edin: setCount(prev => prev + 1). React yeniləmənin tətbiqi zamanı funksiyaya vəziyyətin aktual dəyərini ötürür ki, bu da toplu yeniləmələrdə belə düzgünlüyü təmin edir. Funksional forma olmadan setCount(count + 1) bir neçə dəfə ardıcıl çağırıldıqda köhnəlmiş dəyərdən istifadə edə bilər.

// Tənbəl initallaşdırma — yalnız bir dəfə işləyir
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: elan etmə və yeniləmə

useState-in əsas sintaksisi olduqca yığcamdır: const [state, setState] = useState(initialValue). İlkin dəyər yalnız ilk render zamanı istifadə olunur; sonrakı renderlərdə React onu nəzərə almır və cari saxlanılan dəyəri qaytarır. İlkin hesablama bahalı əməliyyatlar tələb edirsə, initallaşdırıcı funksiya ötürün: useState(() => computeExpensiveInitial()).

Tənbəl initallaşdırma (lazy initial state) xüsusilə ilkin dəyər localStorage-dan, mürəkkəb məlumat çevrilməsindən və ya URL parametrlərinin pars edilməsindən alındıqda vacibdir. React initallaşdırıcı funksiyanı yalnız bir dəfə — komponent montajı zamanı çağırır ki, bu da sonrakı renderlərdə resurslara qənaət edir. Tənbəl initallaşdırma olmadan bahalı ifadə hər renderdə hesablanacaq, hətta nəticəsi nəzərə alınmasa belə.

// Obyekt vəziyyəti — yeni istinad yaradın
const [user, setUser] = useState(() => {
    const saved = localStorage.getItem('user');
    return saved ? JSON.parse(saved) : null;
});

useState müxtəlif məlumat növləri ilə

useState primitivlərlə (ədədlər, sətirlər, boolean) və istinad növləri ilə (massivlər, obyektlər) eyni dərəcədə yaxşı işləyir. Ancaq vacib bir fərq var: primitivlər üçün React dəyişikliyi dəyərə görə, obyektlər və massivlər üçün isə istinada görə müəyyən edir. Mövcud obyekti yenisini yaratmadan mutasiya etmək yenidən renderə səbəb olmayacaq, çünki istinad eyni qalıb.

Obyektlər və massivlərlə işləyərkən həmişə dəyişdirilmiş məlumatlarla yeni surət yaradın. Obyektlər üçün spread sintaksisindən istifadə edin: setUser(prev => ({...prev, name: newName})). Massivlər üçün — yeni massiv qaytaran metodlar: filter, map, concat və ya element əlavə etmək üçün spread sintaksisi. push, pop, splice kimi mutasiya metodları birbaşa işləməyəcək — React onları nəzərə almayacaq, çünki massivə istinad dəyişməyib.

// ✅ Düzgün: hooklar ən yuxarı səviyyədə
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 ilə hooklardan istifadə qaydaları

Bütün React hookları kimi, useState də iki qaydaya tabedir. Birinci: hookları yalnız komponentin ən yuxarı səviyyəsində çağırın — onları şərtlərin, dövrlərin və ya iç-içə funksiyaların daxilində yerləşdirmək olmaz. Bu, hookların hər renderdə eyni ardıcıllıqla çağrılmasını təmin edir ki, bu da React-in daxili bağlı siyahısı üçün kritikdir.

İkinci qayda: hookları yalnız React funksional komponentlərindən və ya xüsusi hooklardan çağırın. useState-i adi funksiyalardan, callback-lərdən və ya sinif komponentlərindən çağırmayın. Bu qaydaların pozulması Invalid hook call xətasına gətirib çıxarır, React bunu icra mərhələsində aşkarlayır.

• Şərtlərdə yox — if (flag) { useState(0) } hookların çağırış ardıcıllığını pozur.
• Dövrlərdə yox — for (...) { useState(0) } ardıcıllığı qeyri-müəyyən edir.
• Callback-lərdə yox — useEffect(() => { useState(0) }, []) bağlı siyahını pozar.

// ❌ Köhnəlmiş closure problemi
function GoodComponent() {
    const [count, setCount] = useState(0);
    const [name, setName] = useState('');
    // ✅ Funksional yeniləmə ilə düzəldildi
}

// sayğac köhnəlmişdir!
function BadComponent() {
    if (isLogged) {
        const [user, setUser] = useState(null);
    }
}

useState ilə tipik səhvlər

Ən çox yayılmış səhv — yeni istinadlar yaratmaq əvəzinə obyektlərin və massivlərin birbaşa mutasiyasıdır. Tərtibatçılar sinif komponentlərindən mutasiya üslubuna öyrəşiblər, burada this.state.user.name = 'Yeni ad' işləyirdi (baxmayaraq ki, tövsiyə olunmurdu). Funksional komponentlərdə belə mutasiya sadəcə nəzərə alınmır: React istinadın dəyişdiyini görmür və komponenti yenidən çəkmir.

• Obyektin mutasiyası — user.name = “Yeni” əvəzinə setUser({...user, name: “Yeni”}).
• Köhnəlmiş closure — funksional forma olmadan setterdə köhnəlmiş dəyərdən istifadə.
• Lazımsız yenidən renderlər — setteri eyni dəyərlə çağırmaq (React 18 primitivlər üçün yenə də render edəcək).
• Vəziyyətin sıfırlanması — komponentin açar propunun qəsdən olmayan yenilənməsi, bu da onu yenidən montaj edir.

Köhnəlmiş closure (stale closure) problemi o zaman yaranır ki, useEffect və ya hadisə idarəedicisinə ötürülən callback, callback-in yaradılması anında closure-dan vəziyyətin köhnəlmiş dəyərini “tutur”. Həll yolu — setterin funksional formasından istifadə etmək və ya lazımi dəyərləri useEffect-in asılılıq massivinə daxil etmək. React Documentation — Hooks FAQ (2025) məlumatına görə, köhnəlmiş closure-lar səhv asılılıq massivindən sonra hooklarda ən çox rast gəlinən ikinci səbəbdir.

// ❌ 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);
}, []);