React Context API

3 min read 30-08-2024

Pengantar

React Context API merupakan fitur bawaan React yang memungkinkan kita untuk membagikan data dan fungsi antara komponen-komponen yang berbeda tanpa harus meneruskan prop secara manual di setiap level hierarki komponen. Hal ini sangat berguna ketika kita memiliki data yang perlu diakses di berbagai bagian aplikasi, seperti data user, tema aplikasi, atau status global aplikasi.

Mengapa Menggunakan React Context API?

Mempermudah Manajemen Data: Menghapus kebutuhan untuk meneruskan props secara manual ke setiap komponen, sehingga membuat kode lebih bersih dan mudah dibaca.
Meningkatkan Keterbacaan Kode: Memisahkan logic terkait data dari komponen-komponen yang menggunakannya, sehingga meningkatkan modularitas dan keterbacaan kode.
Mempermudah Pengujian: Dengan memisahkan data dan logic, kita dapat menguji bagian-bagian kode secara terpisah dengan lebih mudah.

Cara Kerja React Context API

React Context API bekerja dengan menciptakan objek context yang dapat diakses oleh semua komponen di bawahnya dalam hirarki komponen. Objek context berisi nilai-nilai yang ingin kita bagikan, dan setiap komponen yang membutuhkan nilai-nilai tersebut dapat menggunakan context untuk mengaksesnya.

Membuat Context

Untuk membuat context, kita dapat menggunakan fungsi createContext dari React:

import React, { createContext } from 'react';

const MyContext = createContext();

export default MyContext;

Kode di atas menciptakan sebuah context bernama MyContext.

Memberikan Nilai ke Context

Untuk memberikan nilai ke context, kita perlu menggunakan komponen Context.Provider. Komponen ini menerima sebuah objek sebagai props yang akan dibagikan ke semua komponen di bawahnya.

import React, { useState } from 'react';
import MyContext from './MyContext';

function App() {
  const [count, setCount] = useState(0);

  return (
    <MyContext.Provider value={{ count, setCount }}>
      {/* Komponen lainnya di sini */}
    </MyContext.Provider>
  );
}

export default App;

Kode di atas menyediakan nilai count dan fungsi setCount ke context MyContext.

Mengakses Nilai dari Context

Untuk mengakses nilai dari context, kita dapat menggunakan komponen Context.Consumer. Komponen ini menerima sebuah fungsi sebagai props yang menerima nilai dari context sebagai argumen.

import React, { useContext } from 'react';
import MyContext from './MyContext';

function Counter() {
  const { count, setCount } = useContext(MyContext);

  return (
    <div>
      Count: {count}
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

Kode di atas mengakses nilai count dan fungsi setCount dari context MyContext dan menggunakannya untuk menampilkan nilai count dan tombol increment.

Contoh Penggunaan Context API

Membagikan Data User

Misalnya, kita ingin membagikan data user di seluruh aplikasi. Kita dapat membuat context untuk menyimpan data user seperti nama dan email.

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

const UserContext = createContext();

function App() {
  const [user, setUser] = useState({
    name: 'John Doe',
    email: '[email protected]',
  });

  return (
    <UserContext.Provider value={{ user, setUser }}>
      {/* Komponen lainnya di sini */}
    </UserContext.Provider>
  );
}

export default App;

Kemudian, kita dapat mengakses data user di komponen-komponen lain:

import React, { useContext } from 'react';
import UserContext from './UserContext';

function Profile() {
  const { user } = useContext(UserContext);

  return (
    <div>
      <h1>Profile</h1>
      <p>Name: {user.name}</p>
      <p>Email: {user.email}</p>
    </div>
  );
}

export default Profile;

Membagikan Tema Aplikasi

Kita juga dapat menggunakan Context API untuk membagikan tema aplikasi. Misalnya, kita ingin memberikan pengguna opsi untuk memilih antara tema terang dan gelap.

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

const ThemeContext = createContext();

function App() {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {/* Komponen lainnya di sini */}
    </ThemeContext.Provider>
  );
}

export default App;

Kemudian, kita dapat menggunakan tema yang dipilih di komponen-komponen lain:

import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';

function Header() {
  const { theme } = useContext(ThemeContext);

  return (
    <header className={theme}>
      {/* Konten Header */}
    </header>
  );
}

export default Header;

Kesimpulan

React Context API merupakan cara yang mudah dan efektif untuk membagikan data dan fungsi di seluruh aplikasi React. Dengan menggunakan Context API, kita dapat membuat kode aplikasi kita lebih bersih, mudah dibaca, dan lebih mudah diuji.