useLayoutEffect untuk Pengukuran Sebelum Animasi

Terkadang sebuah elemen tampak meloncat atau berkedip saat perenderan pertama sebelum berada di posisi yang benar. Hal ini biasanya terjadi saat Anda mengukur atau mengubah posisi elemen setelah peramban menampilkannya.

Pengguna melihat posisi yang salah selama satu bingkai, lalu melihat koreksi mendadak sehingga tampilan terlihat rusak.

useEffect berjalan setelah peramban menampilkan tampilan. Jadi, jika Anda membaca pengukuran dan memperbarui DOM di dalam useEffect, pengguna sudah melihat bingkai yang belum dikoreksi sebelum perubahan Anda diterapkan.

Untuk penempatan visual yang harus tidak terlihat oleh pengguna, waktu setelah tampilan ditampilkan sudah terlambat.

useLayoutEffect berjalan secara sinkron setelah React mengubah DOM, tetapi sebelum peramban menampilkan tampilan. Setiap pembacaan atau penulisan DOM yang Anda lakukan di sana diterapkan sebelum pengguna melihat satu bingkai pun.

Hal ini menjadikannya alat yang tepat untuk pengukuran dan penempatan yang harus langsung terlihat benar.

Di dalam useLayoutEffect, Anda dapat membaca tata letak elemen dengan ref.current.getBoundingClientRect() untuk mencatat posisi dan ukurannya sebelum menganimasikannya.

Karena kode ini berjalan sebelum tampilan ditampilkan, Anda dapat mengukur sekaligus menerapkan transformasi awal tanpa kilatan yang terlihat.

FLIP adalah singkatan dari Pertama, Terakhir, Inversi, dan Putar. Anda mencatat posisi Pertama elemen, membiarkannya berpindah ke posisi Terakhir, lalu melakukan Inversi dengan menerapkan transformasi yang secara visual mengembalikannya ke posisi Pertama, dan akhirnya melakukan Pemutaran dengan menghapus transformasi tersebut agar elemen beranimasi menuju posisi Terakhir.

Dengan cara ini, Anda dapat menganimasikan perubahan tata letak hanya menggunakan transform yang ringan, meskipun tata letak sebenarnya langsung berubah.

Pembacaan penting dilakukan dalam useLayoutEffect: ambil persegi panjang Pertama sebelum perubahan dan persegi panjang Terakhir sesudahnya, lalu hitung selisihnya. Melakukannya sebelum tampilan ditampilkan memastikan transformasi inversi sudah diterapkan sebelum apa pun terlihat.

Perbedaan antara kedua persegi panjang tersebut memberi Anda nilai translasi dan skala yang tepat untuk melakukan inversi.

Anda menetapkan transformasi inversi secara sinkron di dalam useLayoutEffect, lalu pada bingkai berikutnya menghapusnya agar elemen beranimasi menuju posisi alaminya. Sering kali, Anda memicu langkah pemutaran dengan requestAnimationFrame.

Karena inversi diterapkan sebelum tampilan ditampilkan, pengguna tidak pernah melihat elemen berada di posisi Terakhir yang sebenarnya.

Di server tidak ada DOM, jadi React mencatat peringatan bahwa useLayoutEffect tidak melakukan apa pun selama perenderan di server. Efek tata letak hanya masuk akal di peramban.

Peringatan ini menandakan bahwa efek tersebut tidak dapat berjalan karena tidak ada sesuatu yang dapat diukur.

Jika sebuah komponen harus berjalan di server, gunakan useEffect bersama requestAnimationFrame untuk melakukan pengukuran sebelum tampilan berikutnya ditampilkan, atau gunakan useLayoutEffect secara kondisional hanya di peramban.

Hal ini menghindari peringatan sekaligus tetap memberikan waktu yang mendekati sebelum tampilan ditampilkan untuk animasi yang tidak kritis.

Animasi tinggi adalah contoh klasik: ukur tinggi saat diciutkan dan saat diperluas dalam useLayoutEffect, lalu animasikan di antara nilai piksel yang eksplisit agar transisinya mulus.

Karena tinggi auto tidak dapat dianimasikan, mengukur tinggi sebenarnya terlebih dahulu memungkinkan Anda bertransisi ke angka yang konkret.

Biasanya, gunakan useEffect untuk sebagian besar pekerjaan. Gunakan useLayoutEffect hanya saat Anda membaca tata letak dan harus mengubah DOM sebelum tampilan ditampilkan untuk menghindari kilatan yang terlihat.

Penggunaan berlebihan dapat menurunkan performa karena proses ini menghalangi tampilan hingga selesai.

Anda telah mempelajari bahwa masalah kilatan berasal dari pengukuran setelah tampilan ditampilkan, bahwa useLayoutEffect berjalan sebelum tampilan ditampilkan, dan cara teknik FLIP menganimasikan perubahan tata letak dengan transformasi yang ringan.

Anda juga telah melihat peringatan SSR serta alternatif cadangan berupa useEffect dan requestAnimationFrame.