How Rendering Works: Overview Flashcards
Apa yang dimaksud dengan “render” di React?
Dalam konteks React, “render” berarti memanggil komponen dan menghasilkan struktur elemen React (virtual DOM), namun tidak melakukan perubahan visual di layar. Fase ini hanya terjadi secara internal dan tidak langsung memodifikasi DOM.
Sebutkan tiga fase utama dalam proses rendering di React?
Tiga fase utama dalam proses rendering di React adalah:
Render Phase (Fase Render) Commit Phase (Fase Commit) Repaint (Penggambaran ulang oleh browser)
Apa yang dapat memicu render dalam React?
Render dalam React dapat dipicu oleh:
Initial Render: Ketika aplikasi dijalankan pertama kali. Re-render: Ketika terjadi perubahan state atau props di salah satu komponen yang menyebabkan pembaruan tampilan.
Bagaimana cara update state mempengaruhi proses render di React?
Ketika state diperbarui (misalnya dengan setState), React menandai bahwa render perlu dijadwalkan untuk memproses ulang komponen yang terkena dampak perubahan tersebut. Namun, render ini tidak langsung terjadi, melainkan dijadwalkan untuk waktu berikutnya saat JavaScript engine memiliki waktu luang (render scheduling).
Apa yang terjadi di fase render di React?
Di fase render:
React memanggil fungsi komponen yang diperlukan dan menghasilkan React elements. Menghasilkan virtual DOM tree (pohon elemen virtual). Tidak ada pembaruan visual yang terjadi pada layar di fase ini, karena hanya beroperasi di dalam memori.
Apa yang dilakukan React di fase commit?
Pada fase commit:
React memperbarui DOM nyata berdasarkan hasil dari virtual DOM yang dihasilkan di fase render. React akan menambahkan, menghapus, atau memperbarui elemen di DOM. Perubahan ini adalah proses nyata yang memengaruhi tampilan di layar.
Apa yang terjadi pada fase repaint?
Setelah fase commit selesai, browser mendeteksi perubahan di DOM dan memutuskan apakah perlu melakukan repaint atau reflow pada bagian-bagian yang terpengaruh. Fase ini adalah proses browser yang menghasilkan perubahan visual yang terlihat oleh pengguna.
Apa perbedaan utama antara Render Phase dan Commit Phase?
Render Phase: Menghasilkan elemen React (virtual DOM) berdasarkan state dan props, tanpa perubahan pada DOM nyata.
Commit Phase: Menerapkan perubahan dari virtual DOM ke DOM nyata, sehingga menghasilkan perubahan yang terlihat di layar.
Apa perbedaan antara Initial Render dan Re-render?
Initial Render: Render pertama kali yang dilakukan React saat aplikasi dijalankan.
Re-render: Render yang terjadi ketika ada perubahan state atau props di salah satu komponen.
Apa yang dimaksud dengan Reconciliation di React?
Reconciliation adalah proses di mana React membandingkan versi lama dan baru dari virtual DOM untuk menentukan perubahan minimal yang perlu dilakukan di DOM nyata. Tujuannya adalah untuk mengoptimalkan pembaruan agar lebih efisien dan cepat.
Apa yang dimaksud dengan Scheduling dalam konteks render React?
Scheduling adalah mekanisme React untuk mengatur kapan render seharusnya dieksekusi. Ketika ada perubahan state, React tidak langsung merender ulang, tetapi menjadwalkan render untuk dieksekusi ketika mesin JavaScript memiliki waktu luang.
Apa yang terjadi pada component tree ketika state diubah?
Ketika state diubah, React akan memeriksa seluruh component tree untuk melihat komponen mana saja yang perlu diperbarui. Meski demikian, pembaruan pada DOM nyata hanya dilakukan pada bagian yang benar-benar terpengaruh oleh perubahan state tersebut (berkat reconciliation).
Apa itu Batching dalam React?
Batching adalah teknik di mana beberapa pemanggilan setState dalam satu siklus event dikumpulkan menjadi satu pembaruan tunggal. Ini dilakukan untuk meminimalkan jumlah render yang tidak perlu dan meningkatkan kinerja aplikasi.
Apa itu Virtual DOM di React?
Virtual DOM adalah representasi memori dari struktur UI yang dibentuk oleh React. Setiap kali state atau props berubah, Virtual DOM digunakan untuk menghitung perbedaan (diffing) dengan versi sebelumnya untuk menentukan perubahan minimal yang perlu dilakukan pada DOM nyata.
Apa itu React Fiber?
React Fiber adalah arsitektur inti terbaru React yang didesain untuk memungkinkan kontrol yang lebih baik terhadap proses rendering dan scheduling, memungkinkan React untuk mengelola pembaruan yang kompleks dengan lebih efisien.
