Context dan useContext

Bagian dari kursus React

Aplikasimu punya tombol pengalih dark mode. Tombolnya ada di panel settings, tapi yang perlu tahu nilainya adalah sebuah button delapan komponen ke dalam, di dalam sebuah table, di dalam sebuah card, di dalam sebuah page. Untuk membawa nilai itu dari satu ke yang lain lewat props, setiap komponen di antaranya harus menerima prop theme yang tidak dipakainya lalu meneruskannya begitu saja.

React punya jalan keluar resmi untuk ini, namanya context: sebuah nilai yang dipancarkan di satu titik dalam pohon komponen dan bisa dibaca langsung oleh komponen mana pun di bawahnya, sedalam apa pun, tanpa perlu siapa pun di antaranya ikut mengoper. Gambaran yang pas adalah siaran radio. Sebuah stasiun memancar di satu frekuensi, dan penerima mana pun yang berada dalam jangkauan tinggal menyetel ke situ.