How Rendering Works: The Render Phase Flashcards
Apa yang sebenarnya dilakukan React pada fase render?
Pada fase render, React memanggil fungsi komponen dan membuat React Elements atau virtual DOM.
Ini bukan tentang perubahan di layar atau di DOM nyata, melainkan tentang membangun representasi visual dari UI.
Virtual DOM hanyalah struktur objek JavaScript yang mencerminkan struktur UI aplikasi.
Apa yang dimaksud dengan Virtual DOM di React?
Virtual DOM adalah sebuah representasi objek JavaScript dari tampilan UI.
Ini dibuat pada setiap render, tetapi tidak diubah langsung di DOM nyata.
Tujuan utamanya adalah membantu React dalam menentukan perubahan mana yang perlu diterapkan ke DOM dengan cepat.
Mengapa React menggunakan Virtual DOM?
Membuat dan memperbarui Virtual DOM sangat cepat karena ini hanya objek JavaScript biasa.
DOM nyata lebih lambat untuk diubah karena membutuhkan interaksi langsung dengan browser.
Dengan Virtual DOM, React dapat membandingkan perubahan dengan cepat dan hanya memperbarui bagian dari DOM nyata yang benar-benar berubah.
Apa itu Fiber dan bagaimana React menggunakannya?
Fiber adalah struktur data internal yang digunakan untuk melacak status dan pekerjaan yang harus dilakukan di setiap elemen dan komponen.
Fiber Tree adalah representasi internal dari aplikasi yang mengelola status, antrian pembaruan, dan referensi DOM.
Fiber tidak dihancurkan atau digantikan setiap kali render, melainkan dimutasi berdasarkan perubahan yang ada.
Bagaimana perbedaan antara Virtual DOM dan Fiber Tree?
Virtual DOM: Dibuat setiap kali render dan berfungsi sebagai representasi sementara dari UI yang diinginkan.
Fiber Tree: Struktur data yang terus diperbarui, menyimpan status dan informasi pekerjaan yang perlu dilakukan.
Fiber Tree adalah versi internal yang mengelola pekerjaan di React, sedangkan Virtual DOM hanya representasi visual.
Apa yang dimaksud dengan proses reconciliation di React?
Reconciliation adalah proses di mana React membandingkan virtual DOM baru dengan Fiber Tree yang ada.
Tujuannya adalah untuk menentukan perubahan minimal yang perlu diterapkan ke DOM nyata.
Proses ini menggunakan algoritma yang disebut Diffing untuk menganalisis perbedaan antara dua struktur elemen.
Mengapa React tidak langsung menulis ke DOM saat ada perubahan state?
Menulis langsung ke DOM setiap kali state berubah akan sangat lambat dan tidak efisien.
Dengan Reconciliation, React hanya menerapkan perubahan minimal yang diperlukan ke DOM.
Ini mengurangi beban dan meningkatkan kinerja aplikasi, terutama pada aplikasi besar.
Apa langkah-langkah utama dalam proses reconciliation?
Membuat Virtual DOM Baru: React memanggil fungsi komponen untuk membuat virtual DOM yang baru.
Membandingkan dengan Fiber Tree: React membandingkan virtual DOM baru dengan Fiber tree yang ada.
Menghasilkan Daftar Efek (List of Effects): React membuat daftar perubahan (efek) yang perlu diterapkan ke DOM nyata.
Memutasi Fiber Tree: Fiber tree diperbarui sesuai dengan hasil reconciliation, menciptakan Work in Progress Tree.
Apa yang dimaksud dengan Work in Progress Tree di React?
Work in Progress Tree adalah Fiber Tree yang diperbarui berdasarkan hasil dari proses reconciliation.
Ini menyimpan status dari perubahan yang akan diterapkan ke DOM pada fase commit berikutnya.
Work in Progress Tree menjadi versi terbaru dari Fiber Tree setelah commit selesai.
Apa yang dimaksud dengan Diffing di React?
Diffing adalah algoritma yang digunakan oleh React untuk membandingkan dua virtual DOM.
Proses ini dilakukan untuk menentukan elemen mana yang berubah, ditambah, atau dihapus.
Diffing berfungsi untuk menghindari penulisan ulang seluruh DOM, sehingga hanya bagian yang berubah yang di-update.
Apa yang terjadi pada fase commit di React?
Pada fase commit, React akan menerapkan perubahan nyata ke DOM berdasarkan hasil dari proses reconciliation.
Daftar perubahan (List of Effects) diterapkan satu per satu ke DOM.
Fase commit adalah saat dimana DOM nyata akhirnya diperbarui dengan UI terbaru.
Apa itu rendering asinkron di React dan bagaimana React menggunakannya?
Rendering asinkron memungkinkan React untuk membagi pekerjaan rendering menjadi bagian kecil.
Fiber dapat memutus, melanjutkan, atau memprioritaskan pekerjaan yang perlu dilakukan.
Ini memungkinkan React untuk lebih responsif dan tidak memblokir browser saat render panjang.
Mengapa arsitektur Fiber begitu penting untuk aplikasi besar?
Fiber memungkinkan React untuk mengelola perubahan dengan lebih efisien.
Fiber Tree membantu memprioritaskan dan mengontrol pekerjaan yang perlu dilakukan.
Pada aplikasi besar, Fiber dapat mengurangi beban render panjang, memberikan performa yang lebih baik.
