createContext

createContext memungkinkan Anda membuat context yang dapat disediakan atau dibaca oleh komponen.

const SomeContext = createContext(defaultValue)

Referensi
Penggunaan
- Membuat context
- Mengimpor dan mengekspor konteks dari file
Pemecahan Masalah
- Saya tidak dapat menemukan cara untuk mengubah nilai konteks

Referensi

`createContext(defaultValue)`

Panggil fungsi createContext di luar komponen apapun untuk membuat konteks.

import { createContext } from 'react';

const ThemeContext = createContext('light');

Lihat contoh-contoh lainnya di bawah ini.

Parameters

defaultValue: Nilai yang Anda inginkan untuk konteks ketika tidak ada penyedia konteks yang cocok di dalam pohon di atas komponen yang membaca konteks. Jika Anda tidak memiliki nilai default yang berarti, tentukan null. Nilai default dimaksudkan sebagai fallback “pilihan terakhir”. Nilai ini bersifat statis dan tidak pernah berubah dari waktu ke waktu.

Returns

createContext mengembalikan sebuah konteks objek.

Objek konteks itu sendiri tidak menyimpan informasi apapun Objek ini merepresentasikan konteks yang dibaca atau disediakan oleh komponen lain. Biasanya, Anda akan menggunakan SomeContext.Provider pada komponen di atas untuk menentukan nilai konteks, dan memanggil useContext(SomeContext) pada komponen dibawah ini untuk membacanya. Objek konteks memiliki beberapa properti:

SomeContext.Provider memungkinkan Anda memberikan nilai konteks pada komponen.
SomeContext.Consumer adalah cara alternatif dan jarang digunakan untuk membaca nilai dari konteks.

`SomeContext.Provider`

Bungkus komponen Anda ke dalam penyedia konteks untuk menentukan nilai konteks ini untuk semua komponen di dalamnya:

function App() {
  const [theme, setTheme] = useState('light');
  // ...
  return (
    <ThemeContext.Provider value={theme}>
      <Page />
    </ThemeContext.Provider>
  );
}

Props

value: Nilai yang ingin Anda berikan kepada semua komponen yang membaca konteks ini di dalam penyedia ini, tidak peduli seberapa dalam. Nilai konteks dapat berupa jenis apa saja. Komponen yang memanggil useContext(SomeContext) di dalam penyedia menerima value dari penyedia konteks yang paling dalam di atasnya.

`SomeContext.Consumer`

Sebelum useContext ada, ada cara yang lebih lama untuk membaca konteks:

function Button() {
  // 🟡 Legacy way (not recommended)
  return (
    <ThemeContext.Consumer>
      {theme => (
        <button className={theme} />
      )}
    </ThemeContext.Consumer>
  );
}

Meskipun cara lama ini masih berfungsi, tetapi kode yang baru ditulis harus membaca konteks dengan useContext() sebagai gantinya:

function Button() {
  // ✅ Recommended way
  const theme = useContext(ThemeContext);
  return <button className={theme} />;
}

Props

children: Sebuah fungsi. React akan memanggil fungsi yang Anda berikan dengan nilai konteks saat ini yang ditentukan oleh algoritma yang sama dengan yang dilakukan oleh useContext(), dan me-render hasil yang Anda kembalikan dari fungsi ini. React juga akan menjalankan ulang fungsi ini dan memperbarui UI setiap kali konteks dari komponen induk berubah.

Penggunaan

Membuat context

Konteks memungkinkan komponen pass information deep down tanpa secara eksplisit memberikan props.

Panggil fungsi createContext diluar komponen apapun untuk membuat satu atau beberapa konteks.

import { createContext } from 'react';

const ThemeContext = createContext('light');
const AuthContext = createContext(null);

createContext mengembalikan konteks objek. Komponen membaca konteks dengan mengoper ke useContext():

function Button() {
  const theme = useContext(ThemeContext);
  // ...
}

function Profile() {
  const currentUser = useContext(AuthContext);
  // ...
}

Secara default, nilai yang diterima adalah default values yang Anda tentukan saat membuat konteks. Namun, dengan sendirinya hal ini tidak berguna karena nilai default tidak pernah berubah.

Konteks berguna karena Anda dapat memberikan nilai dinamis lainnya dari komponen Anda:

function App() {
  const [theme, setTheme] = useState('dark');
  const [currentUser, setCurrentUser] = useState({ name: 'Taylor' });

  // ...

  return (
    <ThemeContext.Provider value={theme}>
      <AuthContext.Provider value={currentUser}>
        <Page />
      </AuthContext.Provider>
    </ThemeContext.Provider>
  );
}

Sekarang komponen Page dan semua komponen didalamnya, tidak peduli seberapa dalam, akan “melihat” nilai konteks yang diberikan. Jika nilai konteks yang diberikan berubah, React akan me-render ulang komponen yang membaca konteks tersebut.

Baca lebih lanjut tentang membaca dan memberikan konteks dan lihat contohnya.

Mengimpor dan mengekspor konteks dari file

Sering kali, komponen dalam file yang berbeda membutuhkan akses ke konteks yang sama. Inilah sebabnya mengapa umum untuk mendeklarasikan konteks dalam file terpisah. Kemudian Anda dapat menggunakan export statement untuk membuat konteks tersedia untuk file lain:

// Contexts.js
import { createContext } from 'react';

export const ThemeContext = createContext('light');
export const AuthContext = createContext(null);

Komponen yang dideklarasikan di file lain dapat menggunakan pernyataan import untuk membaca atau menyediakan konteks ini:

// Button.js
import { ThemeContext } from './Contexts.js';

function Button() {
  const theme = useContext(ThemeContext);
  // ...
}

// App.js
import { ThemeContext, AuthContext } from './Contexts.js';

function App() {
  // ...
  return (
    <ThemeContext.Provider value={theme}>
      <AuthContext.Provider value={currentUser}>
        <Page />
      </AuthContext.Provider>
    </ThemeContext.Provider>
  );
}

Cara kerjanya mirip dengan mengimpor dan mengekspor komponen.

Pemecahan Masalah

Saya tidak dapat menemukan cara untuk mengubah nilai konteks

Kode seperti ini menentukan nilai konteks default:

const ThemeContext = createContext('light');

Nilai ini tidak pernah berubah. React hanya menggunakan nilai ini sebagai fallback jika tidak dapat menemukan penyedia yang cocok di atas.

Untuk membuat konteks berubah seiring waktu, tambahkan state dan bungkus komponen didalam penyedia konteks

PreviousAPIs NextforwardRef