Apa itu Context API dalam React?

Context API dalam React adalah cara untuk mengelola dan berbagi state global di seluruh komponen tanpa harus mengoper props secara manual di setiap level komponen. Context API berguna ketika Anda memiliki data yang perlu diakses oleh banyak komponen di berbagai level dalam hierarki komponen.

Langkah-Langkah Menggunakan Context API

1. Membuat Context: Gunakan React.createContext() untuk membuat context.

2. Provider: Gunakan Context.Provider untuk menyediakan nilai context kepada komponen-komponen anak.

3. Consumer: Gunakan Context.Consumer atau hook useContext untuk mengakses nilai context dalam komponen.

Contoh Menggunakan Context API

Berikut adalah contoh bagaimana menggunakan Context API untuk mengelola state tema (light/dark) dalam aplikasi React.

Membuat Context

import React from 'react';

const ThemeContext = React.createContext('light');

export default ThemeContext;

Menggunakan Provider untuk Menyediakan Nilai Context

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import ThemeContext from './ThemeContext';

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

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={theme}>
      <div>
        <button onClick={toggleTheme}>Toggle Theme</button>
        <Toolbar />
      </div>
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  return (
    <ThemeContext.Consumer>
      {(theme) => (
        <button style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
          I am styled by theme context!
        </button>
      )}
    </ThemeContext.Consumer>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Menggunakan Hook useContext (Alternatif Consumer)

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

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

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={theme}>
      <div>
        <button onClick={toggleTheme}>Toggle Theme</button>
        <Toolbar />
      </div>
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
      I am styled by theme context!
    </button>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Penjelasan Kode

1. Membuat Context: const ThemeContext = React.createContext('light'); membuat context dengan nilai default 'light'.

2. Provider: ThemeContext.Provider digunakan untuk menyediakan nilai tema kepada seluruh komponen anak.

3. Consumer: ThemeContext.Consumer atau hook useContext digunakan oleh komponen anak untuk mengakses nilai tema dari context.

Manfaat Context API

• Mengurangi Prop Drilling: Menghilangkan kebutuhan untuk meneruskan props secara manual melalui beberapa tingkat komponen.

• State Global: Memungkinkan untuk mengelola state global yang dapat diakses oleh banyak komponen.

• Modularitas: Memudahkan pengelolaan state yang kompleks dengan memisahkan state dari logika komponen.

Sumber

• React Documentation - Context

• MDN Web Docs - React Context

Context API memungkinkan Anda untuk mengelola state secara efisien dan berbagi data di seluruh aplikasi React tanpa harus bergantung pada prop drilling. Ini memberikan solusi yang bersih dan terorganisir untuk masalah state management pada skala besar.