DevCoach 189: React | Kenalan dengan Lifecycle Component

Dalam sesi ini, kita akan membahas apa itu lifecycle pada komponen React, mulai dari saat komponen dibuat, di-render, hingga dihapus. Kita juga akan melihat bagaimana menangani proses asynchronous di dalamnya, terutama pada class component, sehingga UI dapat merespons perubahan data secara optimal.

Transcript

1. Nur Rizki Adi Curriculum Developer Kenalan dengan Lifecycle Component React
2. Todayʼs Topics • Overview terkait Class Component • React Component Lifecycle dan fungsinya • Handling asynchronous process di Class Component React
3. createElement, The Way to Create React Element React import React from 'react'; const element = React.createElement( 'h1', { id: 'my-title', className: 'text-red', }, 'Biodata Perusahaan', ); console.log(element);
4. HTML in JS React import React from 'react'; const element = React.createElement( 'h1', { id: 'my-title', className: 'text-red', }, 'Biodata Perusahaan', ); console.log(element); import React from 'react'; const element = ( <h1 id="my-title" className="text-red"> Biodata Perusahaan </h1> ); console.log(element);
5. React
6. React component that we will more deep dive! Dua API untuk React Component Functional Class React
7. Mengapa Class Component? • Mendukung state management dalam single component. • Mampu memanfaatkan lifecycle methods untuk menangani berbagai kasus. Try it out: 189-todo-list
8. Bagaimana cara kamu mendapatkan data dari server? via render?
9. Quiz #1 DevCoach 189 React
10. Apa yang dihasilkan dari program ini? A. Error B. null C. Muncul nama dan umur Quiz #1 DevCoach 189
11. Caveat in render Method! • Tidak boleh berjalan secara asynchronous. • Dilarang mengubah data di luar, seperti state.
12. The Correct Way to Make A Server Call • Async process dilakukan pada `componentDidMount`. • Pengubahan state di dalamnya akan memperbarui UI.
13. Fase-Fase Lifecycle di React Component
14. Fase-Fase Lifecycle dalam Component
15. Fase Mounting Lifecycle Method Keterangan constructor Menginisialisasi nilai state komponen. Penambahan properti baru dilakukan dalam properti `state`. render Mendeskripsikan struktur DOM node dengan JSX dan dipanggil secara otomatis saat akan di-render. componentDidMount Melakukan hal-hal lain yang ingin dilakukan setelah component berhasil di-render dalam DOM node, seperti asynchronous process, mengubah state, dsb.
16. Quiz #2 DevCoach 189 React
17. Quiz #2 DevCoach 189 Berdasarkan kode berikut, berapa kali `render` akan berjalan?
18. Fase Updating Lifecycle Method Keterangan render Merender ulang konten yang disebabkan berubahnya state, nilai props baru, pembaruan secara terprogram. componentDidUpdate Melakukan suatu hal setelah konten berhasil di-render ulang. Method ini juga memiliki akses ke props dan state sebelumnya.
19. Fase Updating Ada tiga hal yang membuat component memasuki fase ini: • New props value • setState • forceUpdate
20. Fase Unmounting Lifecycle Method Keterangan componentWillUnmount Melakukan pembersihan (cleaning) komponen, seperti event listener yang diberikan pada elemen terluar.
21. Contoh Pemanfaatan Fase Unmounting
22. “Talk is cheap, Show me The Codeˮ Linus Torvalds
23. Search Sports Club https://codesandbox.io/p/sandbox/search-sports-club-solution-6fk82d
24. Quiz #3 DevCoach 189 React
25. React Dari sekian modul di kelas Belajar Fundamental Aplikasi Web dengan React, apa nomor urut dari modul yang membahas tentang siklus hidup React component? Quiz #3 DevCoach 189
26. Terima kasih nurrizkiadip Nur Rizki Adi Prasetyo NAdiprasetyo nrizki@dicoding.com Nur Rizki Adi Prasetyo React
27. Feedback! dicoding.id/devcoachfeedback React