DevCoach 193: React | Hooks Mengubah Segalanya!

React Hooks hadir sebagai pendekatan baru yang menyederhanakan cara kita mengelola state dan efek samping di React. Dalam sesi ini, kita akan mengupas tuntas pain point penggunaan class component, lalu menyelami penggunaan useState, useEffect, hingga custom hooks. Anda akan belajar bagaimana hooks mempermudah pengembangan aplikasi yang lebih modular, terstruktur, dan mudah diuji.

Transcript

1. Fauzi Kurniawan Academy Code Reviewer Hooks Mengubah Segalanya React Menulis React Lebih sederhana, modular dan Flexible
2. Todayʼs Topics • Summary Review Class Component • History Class to Functional • Class Component Issue • Why React Hooks • Hooks State • Class & Functional Comparison • Live Demo React
3. Quiz #1 DevCoach 193 React
4. Manakah berikut ini cara membuat Class Component yang benar? React A. Component extends React.Component B. class MyComponent extends React.Component C. React.Component extends MyComponent
5. Review Singkat Class Component React
6. Review Singkat Class Component React • React.Component • Constructor • ComponentDidMount • state & setState • render
7. Sejarah singkat React React Create React Class • Satu-satunya cara untuk membuat komponen pada saat itu • React menggunakan createClass karena saat itu JavaScript belum punya sintaksis bawaan untuk membuat skema class.
8. Sejarah singkat React React • Dikenalkan pada React v0.13.0 React.Component
9. Tapi tahu gak sih kamu kalau pembuatan komponen pake React.Component itu punya issue?
10. Class Component Issue - 1 React Constructor
11. Class Component Issue - 2 React Binding
12. Class Component Issue - 3 React Duplikasi Logika
13. Class Component Issue - 4 React Berbagi Kode Nonvisual
14. Rangkuman Permasalahan React • Memanggil super() di class component adalah hal yang menjengkelkan. • Keyword this sulit untuk dipahami oleh developer. • React memaksa kita untuk menata logika dengan orientasi komponen lifecycle. Hal ini membuat duplikasi kode. • Tidak ada cara yang sederhana dan baik untuk berbagi kode nonvisual di React.
15. Solusi React Sekarang kita membutuhkan API komponen baru yang dapat menyelesaikan semua masalah sebelumnya. Dengan ketentuan: • simple (sederhana), • composable (dapat dikomposisi), • flexible (fleksibel), dan • extendable (dapat dikembangkan).
16. Quiz #2 DevCoach 193 React
17. Berikut ini, manakah yang bukan persoalan dari Class Component React A. Binding B. This C. Extends
18. Functional Component static UI React React v0.14.0 memperkenalkan dua jenis komponen: Class Component Functional Component ✅ Mendukung state ✅ Simpel dan ringan ✅ Lifecycle methods ❌ Tidak punya state (sebelum Hooks) Cocok untuk logika kompleks Cocok untuk UI statis / presentational 🔍 Gunakan class jika butuh state & lifecycle, gunakan functional untuk komponen sederhana.
19. Functional Component & React Hooks 🔥 React Dulu : Functional component tidak bisa pakai state dan lifecycle. Sekarang : React Hooks ✅ Kelola state (useState) ✅ Akses lifecycle (useEffect) ✅ Buat logika reusable ( customHooks) 📝 Maka, pembatasan class vs function sudah tidak relevan lagi.
20. Why React Hooks React • Clean Code: Logic terorganisir dan reusable • Hooks dirilis pada React 16.8: Mengubah cara penulisan component • Easy to Learn: React Hooks sangat mudah dipelajari • Big Community: Komunitas yang besar • Good Docs: Dokumentasi yang ramah pemula
21. Hooks State Management React • useState • useEffect • customHooks
22. Hooks State Management React • Use State
23. Hooks State Management React • Use Effect
24. Hooks State Management React • Custom Hooks ◦ Dalam custom hooks, kita lebih bebas menentukan apa yang ingin dibuat, karena custom hooks bukanlah sesuatu yang memiliki struktur baku atau aturan yang kaku. • Beberapa hal yang biasa dibuat dalam customHooks ◦ useInput ◦ useFetch ◦ useDebounce ◦ useForm ◦ dst
25. Quiz #3 DevCoach 193 React
26. Pada versi berapa awal kali Functional dapat dibuat menjadi component namun tanpa state React A. v16.8 B. v0.13.0 C. v0.14.0
27. Perbandingan Class dan Functional React Class Functional this.state = { count: 0 }; const [count, setCount] = useState(0);
28. Perbandingan Class dan Functional React Class Functional componentDidMount() { this.fetchData(); } useEffect(() => { fetchData(); }, []);
29. React Live Demo
30. Search Sports Club Versi Hooks https://codesandbox.io/p/sandbox/search-sports-club-solution-6fk82d
31. Terima kasih fauzi@dicoding.com Fauzi Kurniawan React
32. Feedback! dicoding.id/devcoachfeedback React