useContext: mohiyati, kontekstga kirish hooki va React-da providerlar

React-da useContext nima

useContext — bu React 16.8 da boshqa hooklar bilan birga qo‘shilgan va React kontekstidan qiymat o‘qishga imkon beradigan hookdir. Kontekst React-da komponentlar daraxti orqali har bir darajada propslarni qo‘lda uzatish zaruratisiz ma'lumot uzatish uchun mo‘ljallangan ichki mexanizmdir. useContext eski Context API dagi Consumer komponentini o‘rnini egallaydi va kodni yanada ixcham va o‘qiladigan qiladi.

Kontekstdan foydalanishning odatdagi stsenariylariga dizayn mavzulari (yorug‘/qorong‘u), mintaqaviy sozlamalar va tarjimalar (i18n), foydalanuvchi autentifikatsiyasi, ilova sozlamalari va turli ichma-ichlik darajalarida ko‘plab komponentlarga kerak bo‘ladigan boshqa global ma'lumotlar kiradi. React jamoasi kontekstdan komponentlar pastki daraxti uchun global bo‘lgan, ammo butun ilova uchun bo‘lmagan ma'lumotlar uchun foydalanishni tavsiya qiladi.

React Team — Context documentation (2025) ga ko‘ra, kontekstdan noto‘g‘ri foydalanish React ilovalarida ishlash muammolarining asosiy sabablaridan biridir. Providerdagi qiymatning har bir o‘zgarishi, ma'lumotning qaysi qismi o‘zgarganidan qat'i nazar, barcha iste‘molchilarning qayta renderlanishiga sabab bo‘ladi. useMemo orqali optimallashtirish va kontekstlarni bo‘lish bu muammoni hal qiladi.

import { createContext, useContext } from 'react';

// Kontekstni standart qiymat bilan yaratish
const ThemeContext = createContext('yorug‘');

function ThemedButton() {
    const theme = useContext(ThemeContext);
    return <button className={`btn-${theme}`}>Click</button>;
}

React-da kontekst qanday ishlaydi

React-da kontekst mexanizmi Provider-Consumer namunasi orqali amalga oshiriladi. createContext ikki mavjudotli obyektni qaytaradi: Provider — qiymatni uzatuvchi komponent va useContext da ishlatiladigan kontekst obyektining o‘zi. Provider komponentlar daraxtiga o‘rnatiladi va ichma-ichlik chuqurligidan qat'i nazar, qiymatni barcha bola elementlarga uzatadi.

React useContext chaqiruviga duch kelganda, tegishli kontekst uchun eng yaqin Providerni qidirish uchun fiber daraxti bo‘ylab yuqoriga harakatlanadi. Agar Provider topilsa, uning qiymati qaytariladi. Agar Provider topilmasa, createContext ga uzatilgan standart qiymat qaytariladi. Bu qidiruv har bir renderda sodir bo‘ladi, ammo fiber tugunlarining memizatsiyasi tufayli juda tez va ishlashga ta'sir qilmaydi.

React — Context internals (2024) ga ko‘ra, useContext ning ichki tatbiqi useState kabi hooklarning bog‘langan ro‘yxatidan foydalanadi. Har bir hook fiber tuguniga havola saqlaydi, bu React ga qaysi Provider qaysi kontekstga mos kelishini tez aniqlash imkonini beradi. Agar Provider qiymatni yangilasa, React ushbu kontekstdan foydalanadigan barcha fiber tugunlarini qayta renderlash uchun belgilaydi.

Provider va ichma-ich kontekstlar

Provider komponentlari bir-birining ichiga joylashtirilib, kontekstlar ierarxiyasini yaratishi mumkin. Har bir bola Provider o‘zining pastki daraxti uchun ota-ona qiymatini bekor qiladi. Bu bir ekranda yorug‘ mavzu, ichma-ich modal oynada esa qorong‘u mavzu kerak bo‘lganda foydalidir. useContext har doim daraxtda yuqoridagi eng yaqin Providerning qiymatini qaytaradi.

const UserContext = createContext(null);
const ThemeContext = createContext('yorug‘');

function App() {
    return (
        <UserContext.Provider value={{ name: 'Alice' }}>
            <ThemeContext.Provider value='dark'>
                <Profile />
            </ThemeContext.Provider>
        </UserContext.Provider>
    );
}

createContext bilan provider yaratish

createContext(defaultValue) funksiyasi kontekst obyektini yaratadi. defaultValue parametri komponent useContext ni chaqirganda, lekin daraxtda yuqorida tegishli Provider bo‘lmaganda ishlatiladi. DefaultValue bo‘lmasa, useContext undefined qaytaradi, bu kutilmagan xatolarga olib kelishi mumkin. Har doim mazmunli standart qiymat yoki null uzatish tavsiya etiladi.

Maxsus provider yaratish kontekst mantig‘ini inkapsulyatsiya qilish uchun keng tarqalgan naqshdir. Bunday provider ichida holat (useState yoki useReducer orqali) saqlanadi va Providerning value propu orqali taqdim etiladi. Bu tatbiq tafsilotlarini iste‘molchi komponentlardan yashirish va kontekstni boshqarish mantiqini bir joyda markazlashtirish imkonini beradi.

// Holat boshqaruvi bilan maxsus provider
const AuthContext = createContext(null);

function AuthProvider({ children }) {
    const [user, setUser] = useState(null);

    const login = useCallback(async (email, pass) => {
        const u = await loginApi(email, pass);
        setUser(u);
    }, []);

    return (
        <AuthContext.Provider value={{ user, login }}>
            {children}
        </AuthContext.Provider>
    );
}

Bola komponentlarda useContext dan foydalanish

Funksional komponentlarda useContext kontekstga kirishning yagona usulidir. U render-prop naqshini talab qiladigan eski Context API dagi Consumer komponentini o‘rnini egallaydi: <ThemeContext.Consumer>{value => ...}</ThemeContext.Consumer>. useContext, ayniqsa bir komponentda bir nechta kontekstlar bilan ishlaganda, kodni yanada chiziqli va o‘qiladigan qiladi.

Bir komponentda bir nechta kontekstdan foydalanganda, har bir kontekst uchun useContext ni bir necha marta chaqirish kifoya. Har bir chaqiruv tegishli Providerning qiymatini qaytaradi. Chaqiruvlar tartibi muhim emas, chunki har bir kontekst mustaqil mavjudotdir. React bir nechta chaqiruvlarni bir xil fiber havola tizimi orqali optimallashtiradi.

function Dashboard() {
    const { user } = useContext(AuthContext);
    const theme = useContext(ThemeContext);
    const { locale } = useContext(I18nContext);

    return (
        <div className={`dashboard-${theme}`}>
            <h1>{locale.greeting}, {user.name}</h1>
        </div>
    );
}

useContext vs Redux: qachon nimani tanlash

useContext va Redux o‘rtasidagi tanlov holatni boshqarish miqyosi va murakkabligiga bog‘liq. useContext + useReducer kichik va o‘rta ilovalar uchun Reduxning yengil o‘rnini bosuvchidir. Tashqi kutubxona o‘rnatishni talab qilmaydi, o‘rganish oson va ko‘pchilik vazifalar uchun yetarli. Redux middleware, ishlab chiquvchi vositalari va o‘zgarmas yangilanishlar bilan qat’iy arxitektura talab qilinganda asoslanadi.

Reduxning useContext dan asosiy ustunligi — qayta renderlashlarni optimallashtirish. Standart holatda, Providerdagi qiymat o‘zgarganda, barcha kontekst iste‘molchilari qayta renderlanadi. Redux useSelector va shallowEqual bilan komponentlarga holatning faqat ma'lum qismlariga obuna bo‘lish imkonini beradi, bu katta ilovalarda qayta renderlashlar sonini sezilarli darajada kamaytiradi. Kontekstni ham ko‘plab kichik kontekstlarga bo‘lish orqali optimallashtirish mumkin.

Redux maintainers — When to use Redux (2024) ga ko‘ra, React ilovalarining 70% i Reduxga muhtoj emas. Agar 50 dan kam komponentingiz bo‘lsa va holat keshlash, debounce va yon ta'sirlar bilan murakkab mantiqqa ega bo‘lmasa — useContext + useReducer yetarlidan ko‘pdir. Redux boilerplate qo‘shadi va ongli ravishda ishlatilishi kerak.

useContext bilan odatdagi xatolar

Eng keng tarqalgan xato — har bir Provider renderida value obyektini qayta yaratish. Providerga value={{ user, login }} uzatilsa, har safar Provider renderlanganda yangi obyekt yaratiladi, bu ma'lumotlar o‘zgarmagan bo‘lsa ham barcha iste‘molchilarning qayta renderlanishiga sabab bo‘ladi. Yechim — useMemo orqali value ni memizatsiya qilish yoki tez-tez va kamdan-kam o‘zgaradigan ma'lumotlar uchun alohida kontekstlardan foydalanish.

• Keraksiz qayta renderlashlar — har bir Provider renderida yangi value obyekti. value ni memizatsiya qilish uchun useMemo dan foydalaning.
• Juda katta kontekst — o‘nlab maydonlarga ega bitta Provider har qanday maydon o‘zgarishida barcha bola komponentlarning qayta renderlanishiga sabab bo‘ladi. Ma'noga ko‘ra bir nechta kontekstga bo‘ling.
• DefaultValue yo‘qligi — Provider topilmasa, useContext defaultValue ni qaytaradi, agar undefined bo‘lsa — har bir chaqiruv TypeError bilan tugaydi.
• Bir xil turdagi ichma-ich Providerlar — chuqur darajalarda kontekstni bekor qilish chalkashlikka va kutilmagan qiymatlarga olib kelishi mumkin.

// ❌ Har bir renderda yangi obyekt — barcha iste‘molchilar qayta renderlanadi
<AuthContext.Provider value={{ user, login }}>{children}</AuthContext.Provider>

// ✅ Memizatsiyalangan qiymat — faqat foydalanuvchi yoki login o‘zgarganda qayta renderlash
const authValue = useMemo(() => ({ user, login }), [user, login]);
<AuthContext.Provider value={authValue}>{children}</AuthContext.Provider>

“Katta kontekst” muammosini hal qilish uchun global holatni mantiqiy guruhlarga bo‘ling: AuthContext, ThemeContext, I18nContext. Har bir kontekst o‘z sohasiga javob beradi va mustaqil yangilanadi. Bu bitta ulkan kontekstni useMemo orqali optimallashtirishga urinishdan ko‘ra soddaroq va qayta renderlashlarning oldindan bashorat qilinadigan xatti-harakatini ta'minlaydi.