useContext: mahiyyəti, kontekstə giriş hooku və React-də providerlər

React-də useContext nədir

useContext — bu, React 16.8-də digər hooklarla birlikdə əlavə edilmiş və React kontekstindən dəyər oxumağa imkan verən hookdur. Kontekst React-də daxili mexanizmdir, hər səviyyədə propsları əl ilə ötürmək zərurəti olmadan komponentlər ağacı vasitəsilə məlumat ötürmək üçün nəzərdə tutulmuşdur. useContext köhnə Context API-dən Consumer komponentini əvəz edir və kodu daha yığcam və oxunaqlı edir.

Kontekstdən istifadənin tipik ssenarilərinə dizayn mövzuları (açıq/qaranlıq), regional parametrlər və tərcümələr (i18n), istifadəçi autentifikasiyası, tətbiq parametrləri və müxtəlif iç-içəlik səviyyələrində çoxsaylı komponentlərə lazım olan hər hansı digər qlobal məlumatlar daxildir. React komandası kontekstdən komponentlər alt ağacı üçün qlobal olan, lakin bütöv tətbiq üçün olmayan məlumatlar üçün istifadə etməyi tövsiyə edir.

React Team — Context documentation (2025)-yə görə, kontekstdən düzgün istifadə etməmək React tətbiqlərində performans problemlərinin əsas səbəblərindən biridir. Providerdə dəyərin hər dəyişməsi, məlumatın hansı hissəsinin dəyişməsindən asılı olmayaraq, bütün istehlakçıların yenidən render olunmasına səbəb olur. useMemo vasitəsilə optimallaşdırma və kontekstlərin bölünməsi bu problemi həll edir.

import { createContext, useContext } from 'react';

// Konteksti standart dəyərlə yarat
const ThemeContext = createContext('açıq');

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

React-də kontekst necə işləyir

React-də kontekst mexanizmi Provider-Consumer nümunəsi vasitəsilə həyata keçirilir. createContext iki varlığı olan obyekt qaytarır: Provider — dəyəri ötürən komponent və useContext-də istifadə olunan kontekst obyektinin özü. Provider komponentlər ağacında qurulur və iç-içəlik dərinliyindən asılı olmayaraq dəyəri bütün uşaq elementlərə ötürür.

React useContext çağırışı ilə qarşılaşdıqda, müvafiq kontekst üçün ən yaxın Provideri axtarmaq üçün fiber ağacında yuxarı hərəkət edir. Provider tapılarsa, onun dəyəri qaytarılır. Provider tapılmazsa, createContext-ə ötürülmüş standart dəyər qaytarılır. Bu axtarış hər renderdə baş verir, lakin fiber düymlərinin memizasiyası sayəsində çox sürətlidir və performansa təsir göstərmir.

React — Context internals (2024)-yə görə, useContext-in daxili tətbiqi useState kimi hookların əlaqəli siyahısından istifadə edir. Hər hook fiber düymlərinə istinad saxlayır ki, bu da React-ə müvafiq kontekstə hansı Providerin uyğun olduğunu tez müyyənləşdirməyə imkan verir. Provider dəyəri yeniləyirsə, React yenidən render üçün bu kontekstdən istifadə edən bütün fiber düymlərini qeyd edir.

Provider və iç-içə kontekstlər

Provider komponentləri bir-birinin içinə yerləşdirilərək kontekstlər iyerarxiyası yaradıla bilər. Hər uşaq Provider valideynin dəyərini öz alt ağacı üçün ləğv edir. Bu, bir ekranda açıq mövzu, iç-içə modal pəncərədə isə qaranlıq mövzu lazım olduqda faydalıdır. useContext həmişə ağacda yuxarıda ən yaxın Providerin dəyərini qaytarır.

const UserContext = createContext(null);
const ThemeContext = createContext('açıq');

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

createContext ilə provider yaratma

createContext(defaultValue) funksiyası kontekst obyekti yaradır. defaultValue parametri komponent useContext çağırdıqda, lakin ağacda yuxarıda müvafiq Provider olmadıqda istifadə olunur. DefaultValue olmadan useContext undefined qaytaracaq ki, bu da gözlənilməz səhvlərə səbəb ola bilər. Həmişə mənalı standart dəyər və ya null ötürmək tövsiyə olunur.

Xüsusi provider yaratmaq kontekst məntiqinin inkapsulyasiyası üçün geniş yayılmış nümunədir. Belə bir providerin daxilində vəziyyət (useState və ya useReducer vasitəsilə) saxlanılır və Provider-in value propu vasitəsilə təqdim edilir. Bu, tətbiq detallarını istehlakçı komponentlərdən gizlətməyə və kontekst idarəetmə məntiqini bir yerdə mərkəzləşdirməyə imkan verir.

// Vəziyyət idarəetməsi ilə xüsusi 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>
    );
}

Uşaq komponentlərdə useContext istifadəsi

Funksional komponentlərdə useContext kontekstə çıxış əldə etməyin yeganə yoludur. O, render-prop nümunəsi tələb edən köhnə Context API-dən Consumer komponentini əvəz edir: <ThemeContext.Consumer>{value => ...}</ThemeContext.Consumer>. useContext, xüsusilə bir komponentdə bir neçə kontekstlə işləyərkən kodu daha xətti və oxunaqlı edir.

Bir komponentdə bir neçə kontekstdən istifadə edərkən, hər kontekst üçün useContext-i bir neçə dəfə çağırmaq kifayətdir. Hər çağırış müvafiq Providerin dəyərini qaytarır. Çağırışların sırası əhəmiyyət kəsb etmir, çünki hər kontekst müstəqil varlıqdır. React eyni fiber-istinad sistemi vasitəsilə çoxsaylı çağırışları optimallaşdırır.

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: nə vaxt nəyi seçməli

useContext və Redux arasında seçim vəziyyətin idarə edilməsinin miqyasından və mürəkkəbliyindən asılıdır. useContext + useReducer kiçik və orta tətbiqlər üçün Redux-un yüngül əvəzidir. Xarici kitabxana quraşdırma tələb etmir, öyrənməsi daha asandır və əksər tapşırıqlar üçün kifayətdir. Redux, middleware, tərtibatçı alətləri və dəyişməz yeniləmələrlə ciddi arxitektura tələb olunduqda əsaslandırılır.

Redux-un useContext üzərində əsas üstünlüyü yenidən renderlərin optimallaşdırılmasıdır. Providerdə dəyər dəyişdikdə, standart olaraq bütün kontekst istehlakçıları yenidən render olunur. Redux useSelector və shallowEqual ilə komponentlərə vəziyyətin yalnız müəyyən hissələrinə abunə olmağa imkan verir ki, bu da böyük tətbiqlərdə yenidən renderlərin sayını əhəmiyyətli dərəcədə azaldır. Konteksti də çoxlu kiçik kontekstlərə bölməklə optimallaşdırmaq olar.

Redux maintainers — When to use Redux (2024)-yə görə, React tətbiqlərinin 70%-i Redux-a ehtiyac duymur. 50-dən az komponentiniz varsa və vəziyyət keşləmə, debounce və yan təsirlərlə mürəkkəb məntiqə malik deyilsə — useContext + useReducer kifayətdən çoxdur. Redux boilerplate əlavə edir və şürlə istifadə edilməlidir.

useContext ilə tipik səhvlər

Ən geniş yayılmış səhv hər Provider renderində value obyektinin yenidən yaradılmasıdır. Provider-ə value={{ user, login }} ötürülərsə, Provider hər dəfə render olduqda yeni obyekt yaranır ki, bu da məlumatlar dəyişməsə belə bütün istehlakçıların yenidən render olunmasına səbəb olur. Həll yolu — useMemo vasitəsilə value-nun memizasiyası və ya tez-tez və nadir hallarda dəyişən məlumatlar üçün ayrı kontekstlərin istifadəsidir.

• Artıq yenidən renderlər — hər Provider renderində yeni value obyekti. value-nun memizasiyası üçün useMemo istifadə edin.
• Çox böyük kontekst — onlarla sahəsi olan bir Provider istənilən sahənin dəyişməsi ilə bütün uşaq komponentlərin yenidən render olunmasına səbəb olur. Mənaca görə bir neçə kontekstə bölün.
• DefaultValue-un olmaması — Provider tapılmazsa, useContext defaultValue qaytarır, əgər undefined-dirsə — hər çağırış TypeError ilə nəticələnəcək.
• Eyni tipli iç-içə Providerlər — dərin səviyyələrdə kontekstin ləğvi çaşqınlığa və gözlənilməz dəyərlərə səbəb ola bilər.

// ❌ Hər renderdə yeni obyekt — bütün istehlakçılar yenidən render olunur
<AuthContext.Provider value={{ user, login }}>{children}</AuthContext.Provider>

// ✅ Memizasiya olunmuş dəyər — yalnız istifadəçi və ya login dəyişdikdə yenidən render
const authValue = useMemo(() => ({ user, login }), [user, login]);
<AuthContext.Provider value={authValue}>{children}</AuthContext.Provider>

“Böyük kontekst” problemini həll etmək üçün qlobal vəziyyəti məntiqi qruplara bölün: AuthContext, ThemeContext, I18nContext. Hər kontekst öz sahəsinə cavabdehdir və müstəqil yenilənir. Bu, bir nəhəng konteksti useMemo vasitəsilə optimallaşdırmağa çalışmaqdan daha sadədir və yenidən renderlərin daha proqnozlaşdırıla bilən davranışını təmin edir.