Menghindari Beban Tata Letak dan Kedipan Visual

Gejolak tata letak terjadi ketika JavaScript bergantian membaca properti DOM dan menulis ke DOM dalam sebuah perulangan. Setiap pembacaan setelah penulisan memaksa peramban menghitung ulang tata letak secara sinkron untuk mengembalikan nilai yang akurat. Hal ini dapat mengubah perhitungan tata letak yang seharusnya hanya dilakukan sekali menjadi puluhan kali, sehingga sangat menurunkan kinerja.

React mengelompokkan semua pemanggilan setState dalam penangan peristiwa dan efek menjadi satu perenderan ulang. Pengelompokan alami ini mencegah pola baca-tulis-baca yang menyebabkan gejolak dalam satu siklus perenderan. Dalam React 18, pengelompokan juga mencakup panggilan balik asinkron dan objek janji, sehingga mengurangi gejolak tata letak akibat pembaruan status serentak.

Kedipan terjadi ketika useEffect membaca DOM, memperbarui status, memicu perenderan ulang, dan peramban melakukan pengecatan dua kali: sekali dengan status awal dan sekali dengan status yang sudah diperbaiki. Pengecatan pertama berkedip singkat sebelum digantikan. Hal ini paling terlihat pada efek yang menyesuaikan properti tata letak seperti tinggi, lebar, atau posisi.

Buka Chrome DevTools, buka tab Perenderan melalui menu tiga titik di bawah Alat lainnya, lalu aktifkan "Penyorotan pengecatan." Area yang digambar ulang akan disorot dengan warna hijau. Jika Anda melihat komponen berkedip saat perenderan pertama lalu segera digambar ulang dengan tata letak berbeda, ini mengonfirmasi pengecatan ganda yang disebabkan oleh pembaruan status yang digerakkan oleh useEffect.

Pindahkan pembacaan DOM dan pembaruan status yang dihasilkannya dari useEffect ke useLayoutEffect. Pengukuran dan pembaruan status yang sama kini berlangsung secara sinkron sebelum pengecatan, React merender ulang dan menerapkan perubahan dalam blok yang sama, dan peramban hanya mengecat status akhir yang benar. Kedipan hijau di DevTools menghilang.

Pola tanpa kedipan adalah: baca DOM dalam useLayoutEffect, panggil setState dengan hasil pengukuran, React merender ulang secara sinkron, menerapkan perubahan pada DOM yang sudah diperbaiki, dan peramban mengecat sekali dengan hasil akhir. Ini adalah pola standar untuk pemosisian keterangan alat, ofset tajuk lengket, dan penyiapan animasi.

Sebagian besar efek seharusnya ditempatkan dalam useEffect: pengambilan data (kedipan pemuatan dapat diterima dan memang diharapkan), langganan ke acara atau aliran, pencatatan dan analitik, pewaktu, serta efek apa pun yang tidak langsung memengaruhi tata letak yang terlihat. Penggunaan useLayoutEffect secara berlebihan ketika useEffect sudah memadai merupakan pola antipraktik yang menurunkan performa.

Simpan useLayoutEffect untuk pengukuran DOM yang menjadi masukan bagi keluaran visual: posisi keterangan alat, logika berbasis ukuran elemen, pemulihan posisi gulir, dan penyiapan animasi yang membaca dimensi awal. Gejala jelas yang menunjukkan bahwa Anda perlu beralih adalah terlihatnya kedipan selama satu bingkai berupa tata letak yang salah saat perenderan pertama.

Kedua kait memiliki tanda tangan yang identik: useLayoutEffect(callback, deps) dibandingkan dengan useEffect(callback, deps). Satu-satunya perbedaan adalah waktu ketika fungsi panggilan balik dijalankan. Anda dapat beralih di antara keduanya hanya dengan mengubah satu kata dalam kode. Mulailah dengan useEffect dan ubah ke useLayoutEffect hanya jika Anda mengonfirmasi adanya kedipan.

Anda dapat dan umum untuk menggunakan kedua kait dalam komponen yang sama untuk urusan yang berbeda. Misalnya, komponen grafik dapat menggunakan useLayoutEffect untuk mengukur lebar wadahnya dan menetapkan viewBox SVG secara sinkron, lalu menggunakan useEffect untuk mengambil data grafik secara asinkron. Setiap kait menangani urusan yang waktu pelaksanaannya penting.

Selain penyorotan pengecatan di DevTools, Anda dapat menambahkan penghitung konsol di dalam komponen untuk menghitung perenderan. Jika komponen mencatat "render" dua kali saat pertama kali dipasang—sekali dengan status awal dan sekali dengan pengukuran yang sudah diperbaiki—berarti Anda menghadapi skenario pengecatan ganda. Memindahkan pengukuran ke useLayoutEffect seharusnya menguranginya menjadi satu perenderan yang tercatat setelah pemasangan, terlepas dari penggandaan dalam Strict Mode.

Perubahan tata letak berulang berasal dari pembacaan dan penulisan DOM yang dilakukan bergantian. Pengelompokan React mencegah sebagian besarnya selama perenderan. Kedipan terjadi ketika useEffect mengukur DOM dan memperbarui status sehingga menyebabkan dua pengecatan. Perbaiki kedipan dengan memindahkan pengukuran DOM ke useLayoutEffect. Gunakan useEffect secara bawaan untuk hal lainnya: pengambilan data, langganan, pencatatan, dan pewaktu.