React JS: useContext Hook

Introduction

Pernahkah kamu merasa pusing saat harus mengirim data dari parent component ke child component yang berada jauh letaknya? Atau mungkin kamu pernah mengalami "prop drilling", situasi di mana kamu harus melewatkan props melalui banyak komponen yang sebenarnya tidak membutuhkan data tersebut?

Jika ya, maka useContext adalah solusi yang kamu cari. Dalam artikel ini, kita akan membahas secara lengkap tentang useContext, mulai dari konsep dasar hingga implementasi praktisnya.

Apa Itu useContext Hook?

useContext adalah salah satu React Hook yang memungkinkan kita membagikan data ke seluruh komponen di dalam suatu hierarki tanpa perlu meneruskannya melalui props pada setiap tingkat. Fitur ini bekerja dengan memanfaatkan Context API untuk mempermudah akses data antar komponen. Context dapat diibaratkan sebagai pusat data bersama yang dapat diakses oleh setiap komponen di dalam aplikasi tanpa harus mengirimkan data secara berantai melalui props. Dengan useContext, setiap komponen yang membutuhkan data cukup “mengambil” (consume) langsung dari pusat tersebut (provider).

Sebelum memahami useContext, mari kita lihat masalah yang sering terjadi:

  // Tanpa Context - Prop Drilling
  function App() {
    const user = { name: "Budi", role: "Admin" };
    return <Dashboard user={user} />;
  }
 
  function Dashboard({ user }) {
    return <Sidebar user={user} />; // Hanya meneruskan
  }
 
  function Sidebar({ user }) {
    return <UserProfile user={user} />; // Hanya meneruskan
  }
 
  function UserProfile({ user }) {
    return <div>{user.name}</div>; // Akhirnya dipakai
  }

Dalam contoh di atas, komponen Dashboard dan Sidebar tidak benar-benar membutuhkan data user, namun ia harus meneruskannya karena komponen UserProfile yang ada di dalam kedua komponen tersebut membutuhkannya. Ini yang disebut dengan prop drilling.

Cara Kerja Context dan useContext

Context di React bekerja dengan tiga komponen utama, yaitu:

Context Object - Wadah untuk menyimpan data
Provider - Komponen yang menyediakan data
Consumer - Komponen yang mengonsumsi data (di sini kita pakai useContext)

Langkah 1: Membuat Context

Langkah pertama adalah membuat Context object yang akan menjadi "wadah" untuk data kita. Context dapat diibaratkan sebagai sebuah kotak penyimpanan yang bisa kita akses dari mana saja. Untuk membuatnya, kita perlu menggunakan fungsi createContext().

Parameter yang kita berikan (dalam contoh ini null) adalah nilai default yang akan digunakan jika komponen mencoba mengakses Context tanpa Provider. Biasanya kita isi dengan null, undefined, atau nilai default yang sesuai.

import { createContext } from 'react';
 
// Membuat Context dengan nilai default
export const UserContext = createContext(null);

Note: Context yang sudah dibuat harus di-export agar bisa digunakan di file lain. Biasanya kita simpan Context ini di file terpisah seperti UserContext.js atau contexts/UserContext.js.

Langkah 2: Menyediakan Data dengan Provider

Setelah Context dibuat, langkah selanjutnya adalah menyediakan data yang ingin dibagikan. Di sinilah Provider berperan. Provider adalah komponen khusus yang "membungkus" komponen-komponen yang akan mengakses data tersebut.

Provider memiliki prop value yang berisi data yang ingin kita bagikan. Semua komponen yang ada di dalam Provider (termasuk komponen anak, cucu, dan seterusnya) bisa mengakses data ini.

function App() {
  const user = { name: "Budi", role: "Admin" };
  
  return (
    <UserContext.Provider value={user}>
      <Dashboard />
    </UserContext.Provider>
  );
}

Dalam contoh di atas, kita membungkus komponen Dashboard dengan UserContext.Provider. Artinya, Dashboard dan semua komponen di dalamnya bisa mengakses data user yang kita berikan melalui prop value.

Langkah 3: Mengakses data di child komponen (consume)

Langkah terakhir adalah menggunakan data yang sudah disediakan. Di komponen mana pun yang membutuhkan data tersebut (asalkan masih di dalam Provider), kita bisa menggunakan hook useContext().

Hook ini menerima Context object yang sudah kita buat di Langkah 1, dan mengembalikan nilai yang disediakan oleh Provider terdekat di atasnya.

import { useContext } from 'react';
 
function UserProfile() {
  const user = useContext(UserContext);
  
  return (
    <div>
      <h2>{user.name}</h2>
      <p>Role: {user.role}</p>
    </div>
  );
}

Dengan begitu, kita telah berhasil menggunakan useContext hook untuk membagikan dan mengakses data di seluruh aplikasi React yang kita miliki. Tidak perlu lagi meneruskan props secara manual melalui beberapa tingkat komponen, Selamat mencoba!