Kapan useLayoutEffect Berjalan dibandingkan useEffect

useLayoutEffect dijalankan secara sinkron segera setelah React menerapkan mutasi DOM, tetapi sebelum peramban sempat menampilkan perubahan tersebut. Dari sudut pandang peramban, efek tata letak dan mutasi DOM merupakan bagian dari blok kerja sinkron yang sama dan tidak terputus.

useEffect dijalankan secara asinkron setelah peramban selesai menampilkan perubahan. Pengguna melihat antarmuka yang diperbarui terlebih dahulu, lalu efek dijalankan. Hal ini membuat useEffect lebih sedikit mengganggu kinerja perenderan, tetapi berarti setiap perubahan yang terlihat dan disebabkan oleh efek akan menghasilkan siklus penggambaran kedua.

Anda dapat memverifikasi perbedaan waktu tersebut dengan mencatat stempel waktu dalam kedua efek: tambahkan console.log('layout', Date.now()) di dalam useLayoutEffect dan console.log('passive', Date.now()) di dalam useEffect. Di konsol, stempel waktu efek tata letak akan selalu lebih awal daripada stempel waktu efek pasif, sehingga mengonfirmasi urutan eksekusinya.

Jika useEffect memperbarui status yang memengaruhi keluaran visual, pengguna melihat dua perenderan: perenderan awal dengan status usang, lalu perenderan yang telah diperbaiki setelah efek dijalankan. Hal ini tampak sebagai kedipan atau perubahan tata letak yang terlihat. useLayoutEffect mencegahnya karena pembaruan statusnya diterapkan sebelum peramban menampilkan apa pun.

Jika Anda memanggil setState di dalam useLayoutEffect, React segera menjalankan siklus perenderan dan penerapan lainnya sebelum menampilkan apa pun. Peramban hanya menampilkan hasil akhir—pengguna tidak pernah melihat status perantara. Inilah kasus penggunaan utama useLayoutEffect: mengukur DOM, menghitung nilai baru, menetapkan status, dan menjamin satu kali penggambaran yang bersih.

Karena useLayoutEffect berjalan secara sinkron sebelum tampilan dan dapat memicu perenderan tambahan, penggunaan yang berlebihan dapat menurunkan kinerja. Jika pekerjaan sinkronnya berat, peramban tidak dapat menampilkan apa pun sehingga menyebabkan tampilan tersendat. Gunakan ini hanya ketika Anda perlu mencegah kedipan visual; gunakan useEffect untuk hal lainnya.

Dalam Mode Ketat React (hanya dalam pengembangan), useLayoutEffect dan useEffect sama-sama dipanggil dua kali setiap kali dipasang. Urutannya adalah: dipasang, dibersihkan, lalu dipasang lagi. Hal ini membantu mendeteksi efek yang tidak dibersihkan dengan benar. Pemanggilan ganda tidak terjadi dalam build produksi.

Pilihan bawaan harus selalu useEffect. Beralihlah ke useLayoutEffect hanya jika Anda dapat mengamati dan mereproduksi kedipan visual atau masalah tata letak yang salah. Penggunaan useLayoutEffect secara berlebihan akan menghambat alur penggambaran peramban tanpa alasan dan dapat menurunkan kinerja yang dirasakan.

useLayoutEffect tidak dapat berjalan di server karena tidak ada DOM atau siklus penggambaran peramban dalam lingkungan server. Jika digunakan dalam komponen yang dirender di server, React mengeluarkan peringatan. Perbaikannya adalah melewati efek secara kondisional: periksa typeof window !== 'undefined' atau beralih ke useEffect untuk kode yang kompatibel dengan SSR.

Tanyakan kepada diri sendiri: "Apakah efek ini mengubah sesuatu yang akan dilihat pengguna pada tampilan pertama?" Jika ya, gunakan useLayoutEffect untuk mencegah kedipan. Jika tidak—untuk pengambilan data, langganan, analitik, pencatatan, dan sebagian besar efek samping lainnya—gunakan useEffect. Kerangka keputusan ini mencakup sebagian besar kasus di dunia nyata.

useLayoutEffect berjalan dalam blok sinkron yang sama dengan mutasi DOM. React tidak dapat memproses pekerjaan lain (seperti merespons peristiwa pengguna) saat useLayoutEffect sedang berjalan. Karena itu, efek ini harus cepat dan terarah. Kode sinkron yang berjalan lama dalam useLayoutEffect secara langsung menunda peramban untuk merender tampilan ke layar.

Kapan tepatnya useLayoutEffect dijalankan relatif terhadap mutasi DOM dan penggambaran peramban?

useLayoutEffect berjalan secara sinkron dan dijalankan sebelum penggambaran peramban, sehingga cocok untuk pengukuran DOM dan perbaikan visual. useEffect dijalankan setelah penggambaran dan merupakan pilihan yang tepat untuk pengambilan data, langganan, dan sebagian besar efek samping. Gunakan useEffect sebagai pilihan bawaan dan beralih hanya ketika kedipan visual mengonfirmasi bahwa useLayoutEffect diperlukan. Hindari penggunaannya dalam SSR tanpa penjagaan.