Hook useContext di React: Berbagi Data Tanpa Props

useContext membaca nilai yang disediakan komponen parent, sehingga komponen yang berada jauh di dalam pohon bisa mendapatkannya tanpa setiap komponen di antaranya meneruskan nilai itu sebagai prop. Kamu membuat context dengan createContext, membungkus sebagian pohon dengan provider yang punya value, lalu memanggil useContext(TheContext) di mana pun kamu butuh nilai itu.

import { createContext, useContext, useState } from 'react';

const ThemeContext = createContext('light');

function Button({ children }) {
    const theme = useContext(ThemeContext);
    const dark = theme === 'dark';
    return (
        <button style={{ background: dark ? '#222' : '#eee', color: dark ? '#fff' : '#000' }}>
            {children} ({theme})
        </button>
    );
}

function Toolbar() {
    return (
        <div>
            <Button>Save</Button> <Button>Cancel</Button>
        </div>
    );
}

export default function App() {
    const [theme, setTheme] = useState('light');
    return (
        <div>
            <label>
                <input
                    type="checkbox"
                    checked={theme === 'dark'}
                    onChange={(e) => setTheme(e.target.checked ? 'dark' : 'light')}
                />
                Dark mode
            </label>
            <ThemeContext value={theme}>
                <Toolbar />
            </ThemeContext>
        </div>
    );
}

Toolbar sama sekali tidak menyebut tema, tapi kedua tombol berubah saat kamu mencentang kotaknya. Itulah inti dari context: komponen di tengah tidak perlu membawa prop yang tidak mereka pakai, yaitu masalah prop drilling yang diselesaikan context.

Tiga langkahnya

// 1. Create it once, outside any component, usually in its own file
export const ThemeContext = createContext('light');

// 2. Provide a value to a part of the tree
<ThemeContext value={theme}>
    <Page />
</ThemeContext>

// 3. Read it in any component inside that part
const theme = useContext(ThemeContext);

Di React 19, object context itu sendiri adalah provider-nya. Kode lama menulis <ThemeContext.Provider value={theme}>, yang masih berfungsi, jadi kamu akan melihat keduanya.

useContext mencari provider terdekat dari context itu ke atas pohon. Sebuah komponen membaca provider yang paling dekat, jadi kamu bisa menyusun provider bersarang untuk menimpa nilai bagi satu bagian.

Nilai default

Argumen untuk createContext adalah nilai yang dikembalikan useContext saat tidak ada provider di atas komponen. Nilai ini tidak berubah saat state berubah; nilai ini hanya cadangan.

import { createContext, useContext } from 'react';

const LanguageContext = createContext('en');

const GREETINGS = { en: 'Hello', es: 'Hola', ja: 'こんにちは' };

function Greeting() {
    const lang = useContext(LanguageContext);
    return <p>{GREETINGS[lang]} ({lang})</p>;
}

export default function App() {
    return (
        <div>
            <Greeting />
            <LanguageContext value="es">
                <Greeting />
                <LanguageContext value="ja">
                    <Greeting />
                </LanguageContext>
            </LanguageContext>
        </div>
    );
}

Greeting pertama tidak punya provider di atasnya dan mendapat nilai default 'en'. Yang kedua membaca 'es', dan yang ketiga membaca 'ja' yang lebih dekat. Ganti value="es" di bagian luar menjadi value="ja" dan hanya baris kedua yang berubah.

Memperbarui context dari child

Context hanya meneruskan nilai ke bawah. Agar child yang berada jauh di dalam bisa mengubahnya, simpan nilainya di state tempat provider berada, lalu taruh setter-nya di context di samping nilai itu.

import { createContext, useContext, useState } from 'react';

const UserContext = createContext(null);

function LoginButton() {
    const { user, setUser } = useContext(UserContext);
    if (user) {
        return <button onClick={() => setUser(null)}>Log out {user}</button>;
    }
    return <button onClick={() => setUser('Ada')}>Log in as Ada</button>;
}

function Header() {
    const { user } = useContext(UserContext);
    return <p>{user ? `Signed in as ${user}` : 'Not signed in'}</p>;
}

export default function App() {
    const [user, setUser] = useState(null);
    return (
        <UserContext value={{ user, setUser }}>
            <Header />
            <div style={{ padding: 12, border: '1px solid #ccc' }}>
                <LoginButton />
            </div>
        </UserContext>
    );
}

LoginButton memanggil setUser, state di App berubah, provider mendapat nilai baru, dan Header ikut diperbarui. Tidak ada satu pun komponen yang menerima prop.

Setiap consumer dirender ulang saat nilainya berubah

Saat value milik sebuah provider berubah, React merender setiap komponen yang memanggil useContext untuknya, meskipun komponen itu berada di dalam memo dan props-nya tetap sama. React membandingkan nilai lama dan baru dengan Object.is. Jadi value={{ user, setUser }} adalah object baru di setiap render App, dan setiap consumer dirender lagi bahkan saat user tidak berubah.

import { createContext, useContext, useMemo, useState, memo } from 'react';

const PlainContext = createContext(null);
const MemoContext = createContext(null);

const PlainReader = memo(function PlainReader() {
    const { name } = useContext(PlainContext);
    console.log('PlainReader rendered');
    return <p>Plain: {name}</p>;
});

const MemoReader = memo(function MemoReader() {
    const { name } = useContext(MemoContext);
    console.log('MemoReader rendered');
    return <p>Memoized: {name}</p>;
});

export default function App() {
    const [name, setName] = useState('Ada');
    const [clicks, setClicks] = useState(0);

    const plainValue = { name, setName };
    const memoValue = useMemo(() => ({ name, setName }), [name]);

    return (
        <div>
            <button onClick={() => setClicks(clicks + 1)}>Unrelated update ({clicks})</button>
            <PlainContext value={plainValue}>
                <PlainReader />
            </PlainContext>
            <MemoContext value={memoValue}>
                <MemoReader />
            </MemoContext>
        </div>
    );
}

Kedua reader mencatat log sekali di render pertama. Klik tombolnya: hanya PlainReader yang mencatat lagi, karena context-nya mendapat object baru. useMemo memberikan object yang sama ke MemoContext sampai name berubah, jadi MemoReader tetap diam. Ini baru penting saat rendering mulai lambat; untuk aplikasi kecil, object baru per render tidak masalah.

Memecah context

Nilai yang sering berubah dan nilai yang tidak pernah berubah sebaiknya tidak berbagi satu context. Kalau setter tinggal bersama state-nya, komponen yang hanya perlu memanggil setUser tetap dirender setiap kali user berubah. Taruh keduanya di dua context, dan setiap consumer hanya berlangganan ke apa yang dibacanya:

const UserContext = createContext(null);
const SetUserContext = createContext(() => {});

function UserProvider({ children }) {
    const [user, setUser] = useState(null);
    return (
        <SetUserContext value={setUser}>
            <UserContext value={user}>{children}</UserContext>
        </SetUserContext>
    );
}

setUser dari useState mempertahankan identitas yang sama selamanya, jadi komponen yang hanya membaca SetUserContext tidak pernah dirender karena ada yang login. Ide yang sama berlaku untuk data yang tidak saling berkaitan: tema dan keranjang belanja tempatnya di context terpisah, bukan di satu AppContext besar.

Sentuhan akhir yang umum adalah custom hook seperti useUser() yang memanggil useContext(UserContext) dan melempar error yang jelas saat provider-nya tidak ada, sehingga pemanggil tidak pernah meng-import object context secara langsung.

Context, props, atau library state

• Props adalah pilihan default. Meneruskan nilai dua atau tiga level ke bawah itu jelas dan mudah dilacak.
• Context cocok untuk nilai yang dibutuhkan banyak komponen di berbagai kedalaman dan jarang berubah: tema, bahasa, pengguna yang sedang login, object feature flag.
• Library state (Redux Toolkit, Zustand, Jotai, dan lainnya) cocok untuk state besar yang sering diperbarui, saat kamu ingin sebuah komponen berlangganan ke satu bagian saja dan melewati render yang disebabkan bagian lain. Context tidak punya selector seperti itu: sebuah consumer dirender pada setiap perubahan nilainya.

Sebelum memakai context atau library, periksa apakah meneruskan komponen sebagai children sudah menghilangkan drilling-nya. Sering kali ya, tanpa API baru sama sekali.