Tutorial React Dasar Part 5: Manajemen Global State dengan useContext API

Assalamualaikum Wr. Wb.

Tutorial React Dasar Part 5: Manajemen Global State dengan useContext API | Solusi Mengatasi Props Drilling Tanpa Library Berat | Pernahkah teman-teman membangun aplikasi React yang memiliki struktur komponen bertingkat-tingkat, lalu Anda ingin mengirim data user yang sedang login (nama akun, foto profil, atau status tema Dark Mode) dari komponen paling atas (App.jsx) ke komponen tombol profil yang berada 4 tingkat di dalam folder komponen anak? Biasanya pemula akan mengoper props tersebut melewati komponen Header, lalu Navbar, lalu Sidebar, hingga akhirnya sampai ke tombol profil. Masalah menyebalkan ini disebut sebagai Props Drilling. Di React, kita tidak perlu menginstal library pihak ketiga yang rumit seperti Redux hanya untuk membagikan data global. Kita bisa memanfaatkan fitur bawaan resmi bernama useContext API. Kali ini admin akan membagikan panduan step-by-step setup Context Provider yang dijamin work 100%.

1. Mengenal Bahaya Props Drilling & Solusi Context

Props Drilling membuat kode aplikasi menjadi rapuh dan sulit dirawat:

• Komponen Perantara Terbebani: Komponen Header dan Navbar terpaksa menerima props yang sebenarnya tidak mereka gunakan sama sekali hanya demi menjadi "jembatan" pengantar data.
• useContext Mem-bypass Level: Context bertindak seperti ruang penyimpanan data terpusat (*Global Teleport*) yang memungkinkan komponen anak di kedalaman level mana pun mengambil data langsung tanpa permisi ke komponen perantaranya.

Perbandingan masalah alur Props Drilling vs solusi distribusi state global terpusat useContext

2. Langkah 1: Membuat File Context (src/context/AuthContext.jsx)

Buat folder baru src/context lalu buat file bernama AuthContext.jsx:

// File: src/context/AuthContext.jsx
import { createContext, useState, useContext } from 'react';

// 1. Inisialisasi Context
const AuthContext = createContext();

// 2. Buat Provider pembungkus
export function AuthProvider({ children }) {
  const [user, setUser] = useState({
    nama: 'Aulia Satrio',
    role: 'Administrator',
    isLogin: true
  });

  function handleLogout() {
    setUser(null);
  }

  function handleLogin() {
    setUser({ nama: 'Aulia Satrio', role: 'Administrator', isLogin: true });
  }

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

// 3. Custom Hook pembantu agar mudah dipanggil
export function useAuth() {
  return useContext(AuthContext);
}

3. Langkah 2: Membungkus Aplikasi Utama di App.jsx

Bungkus seluruh komponen aplikasi dengan <AuthProvider> agar seluruh rantai komponen di bawahnya bisa mengakses data:

// File: src/App.jsx
import { AuthProvider } from './context/AuthContext';
import Header from './components/Header';
import Dashboard from './components/Dashboard';

function App() {
  return (
    <AuthProvider>
      <div style={{ backgroundColor: '#0f172a', minHeight: '100vh', color: '#f8fafc', padding: '20px' }}>
        <Header />
        <Dashboard />
      </div>
    </AuthProvider>
  );
}

export default App;

4. Langkah 3: Mengakses State di Komponen Anak Terdalam

Di komponen anak mana pun (misal: src/components/UserProfile.jsx), Anda cukup memanggil hook useAuth() tanpa perlu menerima props apapun dari parent:

// File: src/components/UserProfile.jsx
import { useAuth } from '../context/AuthContext';

function UserProfile() {
  const { user, handleLogin, handleLogout } = useAuth();

  return (
    <div style={{ backgroundColor: '#1e293b', padding: '20px', borderRadius: '8px', border: '1px solid #334155', maxWidth: '400px', margin: '20px auto', textAlign: 'center' }}>
      {user ? (
        <>
          <h3 style={{ color: '#38bdf8', margin: '0 0 6px 0' }}>Halo, {user.nama}!</h3>
          <p style={{ color: '#94a3b8', fontSize: '13px' }}>Role: {user.role}</p>
          <button onClick={handleLogout} style={{ padding: '8px 16px', backgroundColor: '#ef4444', color: '#fff', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
            Log Out
          </button>
        </>
      ) : (
        <>
          <p style={{ color: '#94a3b8' }}>Anda sedang offline.</p>
          <button onClick={handleLogin} style={{ padding: '8px 16px', backgroundColor: '#10b981', color: '#fff', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
            Log In Kembali
          </button>
        </>
      )}
    </div>
  );
}

export default UserProfile;

Itulah panduan praktis menerapkan useContext untuk manajemen global state di React. Pola ini adalah standar resmi React untuk mengelola sesi login, tema warna (Dark/Light Mode), maupun keranjang belanja sederhana tanpa perlu menambah dependensi eksternal yang membengkakkan ukuran aplikasi.

Sekian tutorial kali ini, silahkan share artikel ini jika anda rasa bermanfaat untuk teman atau sahabat yang sedang mempelajari arsitektur state management di React.

Semoga Bermanfaat ^_^

Terima Kasih.

Wassalamualaikum Wr. Wb.

Sumber gambar: Koleksi Pribadi / Screenshot Praktik React Context API