Konteks di React

Sebelum melanjutkan untuk mempelajari hook berikutnya, kita perlu membahas konsep konteks di React.

Biasanya kita meneruskan data dari komponen induk ke komponen anak menggunakan props. Cara ini baik jika Anda tidak memiliki banyak komponen dan Anda tidak perlu meneruskan props dari induk ke komponen yang Anda tuju melalui komponen anak lebih dari 2-3 kali.

Cara ini juga bisa menjadi sangat tidak nyaman dan menimbulkan berbagai masalah, jika di komponen perantara props ini sama sekali tidak digunakan (masalah seperti ini disebut prop drilling), atau Anda perlu meneruskan data yang sama ke banyak komponen.

Dalam kasus ini, konteks dapat membantu kita, yang memungkinkan untuk membuat data komponen induk dapat diakses oleh komponen anak mana pun, terlepas dari posisinya di pohon komponen, tanpa meneruskannya melalui props. Oleh karena itu, hanya komponen yang membutuhkannya yang akan menerima data.

Untuk menggunakan konteks, kita perlu membuatnya. Pertama, buat file MyContext.js dan impor fungsi createContext ke dalamnya:

import { createContext } from 'react';

Sekarang buat objek konteks, simpan ke dalam variabel MyContext, yang jangan lupa untuk diekspor. Dalam kasus kami, kami mengatur nilai awal di createContext menjadi null, karena bagi kami itu tidak prinsipil (bisa juga dibiarkan dengan tanda kurung kosong saja). Nilai default yang ditetapkan akan muncul saat membaca konteks, jika tidak ditemukan nilai lainnya. Nilai ini dapat berupa tipe apa pun:

export const MyContext = createContext(null);

Dalam pelajaran berikutnya kita akan membuat aplikasi yang terdiri dari beberapa komponen, yang terletak di file terpisah. Jika semua komponen berada dalam satu file, maka untuk membuat konteks kita tidak akan membuat file terpisah dan tidak akan mengekspornya.

Sekarang mari impor MyContext.js ke dalam komponen kosong App - ke komponen dari mana kita berencana untuk mengirim data:

import { MyContext } from './MyContext.js';

Buat file MyContext.js dan impor ke dalam komponen kosong App, seperti yang dijelaskan dalam pelajaran.