Fase Rendering dan Commit DOM

Siklus kerja React memiliki dua fase utama: fase perenderan dan fase penerapan. Selama fase perenderan, React memanggil fungsi komponen Anda dan membangun representasi virtual antarmuka pengguna (pohon fiber). Selama fase penerapan, React menerapkan perubahan dari pohon fiber ke DOM yang sebenarnya.

Dalam Mode Konkuren React 18, fase perenderan dapat dijeda, disela, atau dimulai ulang. React mungkin memanggil fungsi komponen Anda beberapa kali sebelum menerapkan apa pun. Inilah alasan fungsi komponen harus murni—fungsi tersebut tidak boleh memiliki efek samping karena mungkin dijalankan lebih dari sekali untuk setiap pembaruan yang terlihat.

Berbeda dari fase perenderan, fase penerapan selalu berjalan secara sinkron hingga selesai. React tidak dapat disela saat menerapkan perubahan DOM. Dengan begitu, DOM tidak pernah dibiarkan dalam keadaan diperbarui sebagian. Pengguna selalu melihat antarmuka yang sepenuhnya konsisten setelah setiap penerapan.

Fase penerapan memiliki tiga subfase: sebelum mutasi (komponen kelas getSnapshotBeforeUpdate dijalankan di sini untuk membaca nilai DOM sebelum perubahan), mutasi (React menyisipkan, memperbarui, dan menghapus simpul DOM), serta tata letak (efek sinkron dijalankan di sini, khususnya useLayoutEffect dan componentDidMount/componentDidUpdate pada komponen kelas).

useEffect merupakan efek pasif, artinya efek ini tidak dijalankan selama fase penerapan. Setelah fase penerapan selesai dan peramban menggambar tampilan, React menjadwalkan efek pasif secara asinkron. Efek tersebut dijalankan setelah peramban memiliki kesempatan untuk merender DOM yang telah diperbarui ke layar.

Peramban menggambar tampilan di antara fase tata letak (tempat useLayoutEffect dijalankan) dan fase efek pasif (tempat useEffect dijalankan). Inilah perbedaan waktu yang penting: useLayoutEffect dijalankan sebelum tampilan digambar, sedangkan useEffect dijalankan sesudahnya. Untuk efek yang mengubah keluaran visual, perbedaan ini sangat penting.

Jika useEffect membaca DOM dan memperbarui status (misalnya, mengukur elemen lalu menetapkan status ukurannya), React akan merender ulang dan menerapkan perubahan sekali lagi. Peramban menggambar tampilan dua kali: pertama dengan ukuran awal dan kedua dengan ukuran yang telah diperbaiki. Pengguna mungkin melihat kilatan ukuran yang salah sebelum perbaikannya muncul.

React secara internal membangun pohon simpul "serat", satu untuk setiap instans komponen. Setiap serat menyimpan status, efek, dan keluaran komponen. Selama fase perenderan, React membuat pohon serat baru yang sedang dikerjakan. Selama fase penerapan, pohon yang sedang dikerjakan menjadi pohon saat ini, dan pohon lama didaur ulang.

Mode Ketat React sengaja memanggil fungsi komponen dan efek dua kali dalam pengembangan untuk membantu menemukan efek samping. useLayoutEffect dan useEffect sama-sama dipasang, dilepas, lalu dipasang kembali. Pemanggilan ganda ini tidak terjadi dalam produksi. Fitur ini dirancang untuk menampilkan kesalahan ketika efek tidak dibersihkan dengan benar.

Karena fase perenderan dapat dihentikan sementara dan dijalankan ulang, fungsi komponen harus menghasilkan keluaran yang sama untuk masukan yang sama tanpa efek samping. Mutasi, langganan, dan panggilan antarmuka pemrograman aplikasi di badan fungsi (bukan di dalam efek) akan berjalan lebih sering dari yang diharapkan dalam Mode Konkuren, sehingga menimbulkan kesalahan.

Jangan pernah membaca properti DOM secara langsung di dalam badan fungsi komponen. DOM mungkin belum ada (untuk perenderan sisi server) atau mungkin sudah usang (untuk perenderan ulang). Selalu baca DOM di dalam useLayoutEffect (untuk pembacaan sebelum tampilan) atau useEffect (untuk pembacaan setelah tampilan), karena DOM dijamin sudah mutakhir.

Dalam subfase manakah pada fase penerapan React useLayoutEffect dijalankan?

Fase perenderan React membangun pohon serat dan dapat dihentikan sementara; fase penerapan menerapkan perubahan DOM dan selalu berjalan secara sinkron. Penerapan memiliki tiga subfase: sebelum mutasi, mutasi, dan tata letak. useLayoutEffect dijalankan pada fase tata letak sebelum tampilan. useEffect dijalankan sebagai efek pasif setelah tampilan.