128. How Rendering Works: The Commit Phase Flashcards
Apa saja dua fase utama dalam proses rendering React?
Render Phase: Fase di mana React menghitung apa yang perlu dirender tanpa menyentuh DOM.
Commit Phase: Fase di mana React menerapkan perubahan yang dihitung ke dalam DOM yang sesungguhnya.
Apa yang memicu dimulainya render phase dalam React?
Render phase dimulai ketika terjadi render awal dari aplikasi atau ketika ada perubahan state pada salah satu komponen.
Apa yang dimaksud dengan Virtual DOM dalam konteks React?
Virtual DOM adalah representasi tidak nyata dari elemen-elemen yang akan ditampilkan di layar.
Dibentuk sebagai pohon (tree) yang disebut Fiber Tree, yang menyimpan elemen React beserta informasi statusnya.
Apa saja informasi yang disimpan oleh setiap node di dalam Fiber Tree?
State dan props dari setiap komponen.
Antrian pekerjaan (queue of work) yang mencatat tindakan yang perlu dilakukan.
Side effects yang perlu diproses setelah render.
Apa itu proses rekonsiliasi dalam React?
Rekonsiliasi adalah proses di mana React membandingkan virtual DOM baru dengan fiber tree yang ada untuk mengetahui perubahan yang terjadi.
Proses ini mencoba menemukan perbedaan (diff) dan menyusun daftar perubahan yang diperlukan untuk mencerminkan keadaan baru ke dalam DOM.
Apa hasil akhir dari render phase dalam React?
Fiber Tree yang diperbarui dan sebuah list DOM updates yang berisi semua perubahan yang perlu dilakukan pada DOM yang sebenarnya.
Apa perbedaan antara render phase dan commit phase dalam hal sifat eksekusi?
Render Phase: Asynchronous (bisa dijeda, dipecah, dan dilanjutkan kembali untuk menghindari pemblokiran JavaScript).
Commit Phase: Synchronous (semua perubahan dilakukan dalam satu waktu tanpa interupsi).
Apa yang terjadi selama commit phase dalam React?
React melakukan:
Penambahan elemen baru ke DOM. Penghapusan elemen yang tidak diperlukan. Pembaruan elemen sesuai dengan perubahan yang dihitung.
Semua perubahan diterapkan dalam satu waktu untuk menghindari tampilan UI yang tidak konsisten.
Mengapa commit phase harus bersifat synchronous?
Supaya DOM tidak menampilkan hasil parsial yang dapat membingungkan pengguna.
Memastikan UI tetap konsisten dan tidak berubah-ubah sebelum semua perubahan selesai.
Apa yang terjadi pada Fiber Tree setelah fase commit selesai?
Setelah commit selesai, work-in-progress Fiber Tree akan menjadi current Fiber Tree untuk siklus render berikutnya, sehingga dapat digunakan kembali tanpa perlu membuat pohon baru dari awal.
Apa hubungan antara React dan DOM?
React tidak langsung mengelola DOM.
React hanya melakukan render, sementara React DOM (library terpisah) bertanggung jawab untuk menerapkan hasil render ke dalam DOM.
Apa yang dimaksud dengan renderer di dalam React?
Renderer adalah library yang bertugas menulis hasil render ke platform target, misalnya:
React DOM untuk aplikasi web. React Native untuk aplikasi mobile. Remotion untuk pembuatan video. Dokumen seperti PDF atau dokumen Word.
Apa alasan React memisahkan proses rendering menjadi dua fase?
Dengan memisahkan Render Phase dan Commit Phase, React dapat:
Menjeda, melanjutkan, dan menghentikan proses render tanpa memengaruhi UI. Melakukan prioritas kerja untuk mengoptimalkan performa. Memastikan UI tidak menunjukkan hasil yang parsial saat pembaruan terjadi.
Mengapa React dapat digunakan untuk berbagai platform seperti web, mobile, dan dokumen?
Karena React sendiri hanya bertanggung jawab untuk proses render, bukan untuk pengelolaan platform.
Setiap platform memiliki renderer yang mengelola bagaimana hasil render diterapkan ke dalam UI, seperti React DOM untuk web dan React Native untuk mobile.
