Mengapa Menggunakan Konteks-API?

• Untuk memahami Mengapa menggunakan Context-API Pertama kita akan melihat Apa itu Props-Drilling .

• Lihatlah gambar pohon komponen kiri.
• Mungkin ada kasus di mana Komponen Anak di bagian bawah pohon akan membutuhkan data .tetapi, Komponen Kontainer atau Komponen Anak di tengah mungkin tidak memerlukan Data itu.
• Dalam hal ini, meskipun Komponen tengah tidak memerlukan data, mereka perlu menerimanya hanya untuk meneruskannya ke Komponen anak.
• Jika Aplikasi Anda terlalu besar maka Ini akan menyebabkan masalah besar. Pengembang harus terus meneruskan data dari satu ke komponen berikutnya.
• Masalah ini dikenal sebagai Alat Peraga Pengeboran.

• Di Context-API, ruang penyimpanan terpisah dibuat di luar pohon Komponen tempat kita harus menyimpan data.
• Sekarang jika kita membutuhkan data itu di dalam komponen apa pun, kita dapat langsung mengakses data dari Context-API.
• Sekarang mari kita lihat bagaimana ini bekerja dengan sebuah contoh.

• Untuk CreateContext kita dapat menggunakan createContext() dari React .
• Setelah UserContext dibuat, kita harus mengekspornya.
• Sekarang untuk menambahkan Data di dalam Konteks kita harus membungkus elemen induk dengan <UserContext.Provider> atau <UserProvider>.
• setelah kita membungkus dengan Wrapper maka kita harus meneruskan data ke atribut nilai .

1) Dalam Komponen Fungsi.

2) Dalam Metode Siklus Hidup Komponen Kelas.

3) Dalam Metode Render Komponen Kelas.

1) Dalam Komponen Fungsi: -

• Di dalam Komponen Fungsional atau Hooks, kita harus menggunakan useContext() Hook yang Disediakan oleh paket React.
• Sekarang kita harus mengimpor UserContext dan meneruskannya ke useContext() .
• useContext(UserContext) akan mengembalikan Data pengguna di dalam Context.yang dapat kita gunakan lebih lanjut.

• Cara paling umum untuk mengakses Konteks dari komponen kelas adalah melalui static contextType.
• Jika Anda membutuhkan nilai dari Context di luar render, atau dalam metode siklus hidup, Anda akan menggunakannya dengan cara ini.

• Cara tradisional untuk mengambil nilai Konteks adalah dengan membungkus komponen anak dalam file Consumer.
• Dari sana, Anda akan dapat mengakses prop nilai sebagai props.
• Anda mungkin masih melihat ini, tetapi ini lebih merupakan cara lama untuk mengakses Konteks.