useContext: esensya, hook ng pag-access sa konteksto at provider sa React

Ano ang useContext sa React

useContext — ay isang hook na idinagdag sa React 16.8 kasama ng iba pang mga hook, na nagpapahintulot sa iyo na magbasa ng halaga mula sa React konteksto. Ang konteksto ay isang built-in na mekanismo sa React, na idinisenyo para sa pagpapasa ng data sa pamamagitan ng puno ng component nang hindi kinakailangang manu-manong magpasa ng props sa bawat antas. Ang useContext ay pumapalit sa Consumer component mula sa lumang Context API at ginagawang mas maikli at nababasa ang code.

Ang mga tipikal na senaryo ng paggamit ng konteksto ay kinabibilangan ng mga tema ng disenyo (maliwanag/madilim), mga setting ng rehiyon at pagsasalin (i18n), pagpapatunay ng gumagamit, mga setting ng application, at anumang iba pang global na data na kailangan ng maraming component sa iba’t ibang antas ng nesting. Inirerekomenda ng React team na gamitin ang konteksto para sa data na global para sa sub-tree ng mga component, ngunit hindi para sa buong application.

Ayon sa React Team — Context documentation (2025), ang hindi wastong paggamit ng konteksto ay isa sa mga pangunahing sanhi ng problema sa pagganap sa React applications. Ang bawat pagbabago ng halaga sa Provider ay nagdudulot ng muling pag-render ng lahat ng consumer, anuman ang bahagi ng data na nagbago. Ang pag-optimize sa pamamagitan ng useMemo at paghihiwalay ng mga konteksto ay lumulutas ng problemang ito.

import { createContext, useContext } from 'react';

// Gumawa ng konteksto na may default na halaga
const ThemeContext = createContext('maliwanag');

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

Paano gumagana ang konteksto sa React

Ang mekanismo ng konteksto sa React ay ipinatupad sa pamamagitan ng pattern na Provider-Consumer. Ang createContext ay nagbabalik ng object na may dalawang entity: Provider — ang component na nagpapasa ng halaga, at ang object ng konteksto mismo na ginagamit sa useContext. Ang Provider ay naka-mount sa puno ng component at nagpapasa ng halaga sa lahat ng child elements anuman ang lalim ng nesting.

Kapag ang React ay nakatagpo ng isang tawag na useContext, ito ay gumagalaw paitaas sa pamamagitan ng fiber tree upang hanapin ang pinakamalapit na Provider para sa kontekstong iyon. Kung ang Provider ay natagpuan, ang halaga nito ay ibinabalik. Kung ang Provider ay hindi natagpuan, ang default na halaga na ipinasa sa createContext ay ibinabalik. Ang paghahanap na ito ay nangyayari sa bawat pag-render, ngunit salamat sa memorization ng fiber nodes ito ay napakabilis at hindi nakakaapekto sa pagganap.

Ayon sa React — Context internals (2024), ang panloob na implementasyon ng useContext ay gumagamit ng naka-link na listahan ng mga hook, katulad ng useState. Ang bawat hook ay nagtatabi ng reference sa fiber node, na nagpapahintulot sa React na mabilis na matukoy kung aling Provider ang tumutugma sa kontekstong iyon. Kung ang Provider ay nag-update ng halaga, minamarkahan ng React ang lahat ng fiber nodes na gumagamit ng kontekstong ito para sa muling pag-render.

Provider at naka-nest na mga konteksto

Ang mga Provider component ay maaaring i-nest sa isa’t isa, na lumilikha ng hierarchy ng mga konteksto. Ang bawat child Provider ay nag-o-override sa halaga ng magulang para sa sub-tree nito. Ito ay kapaki-pakinabang kapag sa isang screen ay kailangan ang maliwanag na tema, at sa naka-nest na modal window — madilim na tema. Ang useContext ay palaging nagbabalik ng halaga ng pinakamalapit na Provider paitaas sa puno.

const UserContext = createContext(null);
const ThemeContext = createContext('maliwanag');

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

Paggawa ng provider gamit ang createContext

Ang function na createContext(defaultValue) ay gumagawa ng object ng konteksto. Ang parameter na defaultValue ay ginagamit kapag ang component ay tumawag ng useContext, ngunit sa itaas ng puno ay walang kaukulang Provider. Kung walang defaultValue, ang useContext ay magbabalik ng undefined, na maaaring humantong sa hindi inaasahang mga error. Inirerekomenda na palaging magpasa ng makabuluhang default na halaga o null.

Ang paggawa ng custom na provider ay isang karaniwang pattern para sa encapsulation ng lohika ng konteksto. Sa loob ng naturang provider, ang estado ay iniimbak (sa pamamagitan ng useState o useReducer) at ibinibigay sa pamamagitan ng value prop ng Provider. Ito ay nagpapahintulot na itago ang mga detalye ng implementasyon mula sa mga consumer component at isentro ang lohika ng pamamahala ng konteksto sa isang lugar.

// Custom provider na may pamamahala ng estado
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>
    );
}

Paggamit ng useContext sa mga child component

Sa functional components, ang useContext ay ang tanging paraan upang makakuha ng access sa konteksto. Ito ay pumapalit sa Consumer component mula sa lumang Context API, na nangangailangan ng render-prop pattern: <ThemeContext.Consumer>{value => ...}</ThemeContext.Consumer>. Ang useContext ay ginagawang mas linear at nababasa ang code, lalo na kapag nagtatrabaho sa maraming konteksto sa isang component.

Kapag gumagamit ng maraming konteksto sa isang component, tawagan lamang ang useContext nang maraming beses para sa bawat konteksto. Ang bawat tawag ay nagbabalik ng halaga ng kaukulang Provider. Ang pagkakasunud-sunod ng mga tawag ay hindi mahalaga, dahil ang bawat konteksto ay isang independiyenteng entity. Ino-optimize ng React ang maraming tawag sa pamamagitan ng parehong sistema ng fiber references.

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: kailan pipiliin ang alin

Ang pagpili sa pagitan ng useContext at Redux ay depende sa laki at pagiging kumplikado ng pamamahala ng estado. Ang useContext + useReducer ay isang magaan na kapalit para sa Redux para sa maliit at katamtamang mga application. Hindi ito nangangailangan ng pag-install ng external na library, mas madaling matutunan, at sapat para sa karamihan ng mga gawain. Ang Redux ay makatwiran kapag kailangan ang mahigpit na arkitektura na may middleware, mga tool sa pag-develop, at hindi nababagong mga update.

Ang pangunahing bentahe ng Redux kaysa sa useContext ay ang pag-optimize ng muling pag-render. Bilang default, kapag nagbago ang halaga sa Provider, lahat ng consumer ng konteksto ay nagre-render muli. Ang Redux na may useSelector at shallowEqual ay nagpapahintulot sa mga component na mag-subscribe lamang sa mga partikular na bahagi ng estado, na makabuluhang nagbabawas ng bilang ng muling pag-render sa malalaking application. Ang konteksto ay maaari ring ma-optimize sa pamamagitan ng paghahati sa maraming maliliit na konteksto.

Ayon sa Redux maintainers — When to use Redux (2024), 70% ng React applications ay hindi nangangailangan ng Redux. Kung mayroon kang mas mababa sa 50 component at ang estado ay walang komplikadong lohika na may caching, debounce at side effects — ang useContext + useReducer ay higit pa sa sapat. Ang Redux ay nagdaragdag ng boilerplate at dapat gamitin nang may kamalayan.

Mga karaniwang pagkakamali sa useContext

Ang pinakakaraniwang pagkakamali ay ang muling paggawa ng value object sa bawat pag-render ng Provider. Kung magpapasa ka ng value={{ user, login }} sa Provider, sa bawat pag-render ng Provider ay gumagawa ng bagong object, na nagdudulot ng muling pag-render ng lahat ng consumer, kahit na hindi nagbago ang data. Ang solusyon — memorization ng value sa pamamagitan ng useMemo o paggamit ng hiwalay na konteksto para sa madalas at bihirang nagbabagong data.

• Mga hindi kinakailangang muling pag-render — bagong value object sa bawat Provider render. Gamitin ang useMemo para sa memorization ng value.
• Masyadong malaking konteksto — isang Provider na may dose-dosenang field ay nagdudulot ng muling pag-render ng lahat ng child component sa pagbabago ng anumang field. Hatiin sa maraming konteksto ayon sa kahulugan.
• Kawalan ng defaultValue — kung hindi natagpuan ang Provider, ang useContext ay nagbabalik ng defaultValue, at kung ito ay undefined — bawat tawag ay mabibigo sa TypeError.
• Naka-nest na Provider ng parehong uri — pag-override ng konteksto sa malalalim na antas ay maaaring nakakalito at humantong sa hindi inaasahang halaga.

// ❌ Bagong object sa bawat render — lahat ng consumer ay nagre-render muli
<AuthContext.Provider value={{ user, login }}>{children}</AuthContext.Provider>

// ✅ Na-memorize na halaga — muling pag-render lamang kapag nagbago ang user o login
const authValue = useMemo(() => ({ user, login }), [user, login]);
<AuthContext.Provider value={authValue}>{children}</AuthContext.Provider>

Upang malutas ang problema ng “malaking konteksto”, hatiin ang global na estado sa mga lohikal na grupo: AuthContext, ThemeContext, I18nContext. Ang bawat konteksto ay responsable para sa sarili nitong domain at nag-a-update nang independiyente. Ito ay mas simple kaysa subukan na i-optimize ang isang higanteng konteksto sa pamamagitan ng useMemo at nagbibigay ng mas predictable na pag-uugali ng muling pag-render.