React Context Solusi Elegan Pengganti Props yang Bersarang

Transcript

1. Fauzi Kurniawan Academy Code Reviewer React Context Solusi Elegan Pengganti Props yang Bersarang
2. Todayʼs Topics • Permasalahan prop drilling • Pengenalan React Context API • Cara membuat dan menggunakan Provider & Consumer • Alternative context dengan state management lainnya • Live Demo
3. Teknik mengoper data dari parent ke child... ke child... ke child... Apa itu Props Drilling?
4. Contoh props drilling yang katanya bikin pusing Padahal user cuma dipakai di Avatar. Contoh Props Drilling
5. Contoh Props Drilling Props data dari project yang gak kemaintain😂
6. Props Drilling Props Drilling itu... capek, bos 😩
7. Ada solusinya? Andai aja ada alat ajaib yang bisa nurunin props data tanpa harus bersarang !
8. Kenalan sama React Context!!! Kalau kamu sering ketemu kasus kaya gini: • 🔁 Terlalu banyak komponen perantara • 🧩 Data numpang lewat doang • 🤕 Sulit dirawat dan debug Berarti sudah saatnya kamu kenalan sama React Context
9. QUIZ #1
10. Apa tujuan utama dari React.Context? A. Meningkatkan performa secara signifikan B. Menyimpan data ke local Storage secara otomatis C. Menggunakan state antar component D. Memungkinkan React berjalan dengan framework lain
11. React.Context “Context provides a way to pass data through the component tree without having to pass props down manually at every level.ˮ - Dokumentasi React
12. Membangun Pondasi React.Context Ada tiga komponen utama yang selalu terlibat dalam penggunaan Context: • createContext • Provider • Consumer Tanpa ketiganya, Context gak akan jalan.
13. createContext createContext - pondasi utama dalam membangun React Context. Dari sinilah semua komunikasi data lewat Context dimulai.
14. createContext createContext akan melahirkan 2 buah object, yaitu Provider & Consumer
15. createContext Kita bisa lakukan langkah awal dengan melakukan inisiasi context
16. Provider Komponen yang memungkinkan kita untuk mendeklarasikan data apa yang hendak disimpan secara global dalam cakupan hierarki komponen.
17. Consumer Komponen yang memungkinkan kita untuk mendapatkan data yang disimpan pada Provider di dalam komponen mana pun selama berada di hirarki komponen.
18. Consumer Consumer dapat diterapkan juga dengan gaya hooks
19. QUIZ #2
20. Di mana sebaiknya kita meletakkan Provider>? A. Di dalam komponen paling kecil B. Di bagian luar aplikasi untuk mencakup semua komponen yang butuh data C. Tepat di bawah useEffect D. Di dalam return statement useContext
21. Context Bukan Solusi Untuk Segalanya “Jika Anda hanya memiliki palu, apa pun masalah yang ada akan terlihat seperti paku.ˮ - Mark Twain.
22. React Context Issue 🔄 Re-render berlebihan: semua komponen yang pakai context akan render ulang meski cuma satu bagian data yang berubah. 🧠 Sulit di-maintain: makin banyak context = makin banyak provider bertumpuk. 🧪 Debugging terbatas: tidak ada devtools resmi seperti Redux DevTools.
23. React Context “Context cocok untuk kasus sederhana, tapi... bagaimana kalau aplikasi kita makin besar dan state yang dikelola makin kompleks?ˮ
24. Alternative State Management • Redux → cocok untuk aplikasi besar, mendukung middleware, dan punya ekosistem kuat • Zustand → lebih ringan dan simpel, cocok untuk project modern • Recoil, Jotai, MobX, dan lainnya → masing-masing punya pendekatan unik dalam mengelola state
25. LIVE DEMO
27. QUIZ #3
28. Apa kasus fitur yang cocok untuk disimpan di dalam React Context? A. Formulir B. Fitur Dropdown C. User Preference D. Status Autentikasi E. Dynamic List Item
29. Thank you. fauzi@dicoding.com Fauzi Kurniawan