Cara Menggunakan useContext pada React.JS untuk Manajemen State yang Efisien

React.JS adalah salah satu library JavaScript paling populer untuk membangun antarmuka pengguna yang dinamis. Salah satu fitur penting dalam React adalah useContext, yang memungkinkan developer untuk berbagi state antar komponen tanpa harus melakukan prop drilling. Artikel ini akan membahas cara menggunakan useContext dengan contoh praktis.

Apa Itu useContext?

useContext adalah sebuah hook yang disediakan oleh React untuk mengakses nilai dari sebuah context. Context sendiri adalah cara React untuk berbagi data yang dapat dianggap "global" dalam sebuah pohon komponen. Dengan useContext, Anda dapat menghindari pengiriman props secara manual dari komponen induk ke komponen anak yang membutuhkannya.

Langkah-Langkah Menggunakan useContext

1. Membuat Context

Pertama, Anda perlu membuat context menggunakan React.createContext(). Context ini akan menyimpan data yang ingin Anda bagikan.

import React from 'react';

const UserContext = React.createContext();

2. Membungkus Komponen dengan Provider

Setelah context dibuat, Anda perlu membungkus komponen yang membutuhkan akses ke data tersebut dengan Provider. Provider akan menerima sebuah prop value yang berisi data yang ingin dibagikan.

function App() {
  const user = { name: 'John Doe', age: 30 };

  return (
    
      
    
  );
}

3. Mengakses Context dengan useContext

Di dalam komponen yang membutuhkan data dari context, Anda dapat menggunakan hook useContext untuk mengakses nilai tersebut.

 import React, { useContext } from 'react';

function ChildComponent() {
  const user = useContext(UserContext);

  return (
    

Nama: {user.name}

Umur: {user.age}


  );
}
 

Keuntungan Menggunakan useContext

• Mengurangi Prop Drilling: Tidak perlu mengirim props melalui banyak level komponen.
• Kode Lebih Bersih: Komponen hanya mengakses data yang dibutuhkan langsung dari context.
• Mudah Dikelola: Perubahan state dapat dilakukan secara terpusat.

Contoh Kasus Penggunaan useContext

Misalkan Anda sedang membangun aplikasi e-commerce yang membutuhkan data pengguna di berbagai komponen seperti navbar, keranjang belanja, dan profil. Dengan useContext, Anda dapat menyimpan data pengguna di context dan mengaksesnya di komponen-komponen tersebut tanpa harus mengirim props secara manual.

Kesimpulan

useContext adalah solusi yang efisien untuk berbagi state antar komponen dalam React.JS. Dengan mengikuti langkah-langkah di atas, Anda dapat mengimplementasikan useContext dengan mudah dan membuat kode Anda lebih modular dan mudah dikelola.