Context API — CompileDaily Study

Penjelasan

Context API mengatasi masalah "prop drilling" — meneruskan props lewat banyak level komponen yang sebenarnya tidak butuh data itu, cuma jadi perantara. Dibuat lewat createContext(), disediakan lewat komponen Provider, dan diakses di komponen mana pun di bawahnya lewat useContext() TANPA perlu passing props manual.

Contoh Konsep

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

const TemaContext = createContext();

function App() {
    const [tema, setTema] = useState('terang');

    return (
        <TemaContext.Provider value={{ tema, setTema }}>
            <Halaman />
        </TemaContext.Provider>
    );
}

function Halaman() {
    return <TombolTema />; // tidak perlu passing props tema di sini
}

function TombolTema() {
    const { tema, setTema } = useContext(TemaContext); // langsung akses
    return (
        <button onClick={() => setTema(tema === 'terang' ? 'gelap' : 'terang')}>
            Tema: {tema}
        </button>
    );
}

Praktikum

Buat UserContext dengan createContext(). Buat App yang menyediakan state user (objek {nama: 'Budi'}) lewat Provider. Buat komponen ProfilUser yang mengakses user lewat useContext(UserContext) dan menampilkan namanya, dipanggil dari dalam komponen perantara tanpa passing props manual.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Context BUKAN pengganti universal untuk semua state management — untuk data yang sering berubah dan cuma dipakai 1-2 komponen bertetangga, props biasa/lifting state up tetap lebih sederhana. Context paling berguna untuk data yang benar-benar "global" di banyak level, mis. tema, bahasa, atau data user yang login.