Context API: Obrolan Data Tanpa Props - ReactJS

ReactJS

membangun antarmuka pengguna yang interaktif dan dinamis dengan pendekatan berbasis komponen

 

1. Apa Itu Context API?

Saat membangun aplikasi React, sering kali kita perlu mengirim data dari satu komponen ke komponen lainnya. Biasanya, kita menggunakan props untuk mengirim data, tetapi jika terlalu banyak level, ini bisa bikin pusing!

Nah, Context API hadir sebagai solusi agar kita bisa mengirim data langsung ke komponen yang membutuhkan, tanpa harus melewati setiap level komponen.

2. Kenapa Butuh Context API?

Tanpa Context API, kita harus melakukan prop drilling—yaitu mengoper props dari komponen induk ke anak, cucu, cicit, dan seterusnya. Ini bikin kode kita lebih ribet dan susah dipelihara.

Dengan Context API, kita bisa:  Mengirim data ke komponen lain tanpa harus oper props berkali-kali.  Menghindari prop drilling yang bikin kode jadi berantakan.  Membuat kode lebih bersih dan mudah dipahami.

3. Cara Menggunakan Context API

Mari kita buat contoh sederhana dengan Context API!

3.1. Membuat Context

import { createContext, useState } from "react";

const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState("light");
  
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export { ThemeContext, ThemeProvider };

Di sini kita membuat ThemeContext untuk menyimpan tema aplikasi ("light" atau "dark").

3.2. Menggunakan Context di Komponen

Sekarang, kita bisa menggunakan context di dalam komponen yang membutuhkannya.

import { useContext } from "react";
import { ThemeContext } from "./ThemeProvider";

const ThemeSwitcher = () => {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <div>
      <p>Mode saat ini: {theme}</p>
      <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
        Ganti Tema
      </button>
    </div>
  );
};

3.3. Memasukkan Provider ke dalam Aplikasi

Agar semua komponen bisa mengakses context, kita perlu membungkus aplikasi kita dengan ThemeProvider.

import { ThemeProvider } from "./ThemeProvider";
import ThemeSwitcher from "./ThemeSwitcher";

const App = () => {
  return (
    <ThemeProvider>
      <ThemeSwitcher />
    </ThemeProvider>
  );
};

export default App;

Sekarang, ThemeSwitcher bisa mengakses dan mengubah tema tanpa harus menerima props dari komponen induk!

4. Kapan Harus Menggunakan Context API?

Context API cocok digunakan jika:  Data yang dikirim sering dipakai di banyak komponen (misalnya tema, autentikasi, bahasa, dll.).  Ingin menghindari prop drilling yang berlebihan.  Tidak ingin menggunakan state management eksternal seperti Redux atau Zustand.

Namun, jika hanya butuh mengirim data ke satu atau dua level komponen, cukup gunakan props biasa. Jangan sampai overkill ya!

5. Kesimpulan

 Context API memungkinkan kita mengirim data ke komponen tanpa harus terus-menerus mengoper props.  Menggunakan createContext untuk membuat context dan useContext untuk mengaksesnya.  Harus membungkus aplikasi dengan Provider agar context bisa digunakan.  Context API cocok untuk data yang dipakai di banyak tempat seperti tema, autentikasi, dan bahasa.

Dengan Context API, komunikasi antar komponen jadi lebih simpel dan efisien!