Mengukur Elemen DOM dengan useLayoutEffect

element.getBoundingClientRect() mengembalikan objek DOMRect yang berisi ukuran dan posisi elemen relatif terhadap area tampilan: top, right, bottom, left, width, dan height. Fungsi ini memaksa peramban melakukan perhitungan tata letak untuk mengembalikan nilai yang akurat, jadi panggil seperlunya.

Jika Anda membaca getBoundingClientRect() di dalam useEffect, peramban sudah selesai menampilkan tampilan. Jika kemudian Anda menetapkan status berdasarkan pengukuran tersebut, React melakukan perenderan ulang dan peramban menggambar ulang. Pengguna mungkin melihat elemen sebentar dalam posisi atau ukuran yang salah sebelum perbaikan muncul pada penggambaran kedua.

Membaca pengukuran di dalam useLayoutEffect terjadi setelah mutasi DOM, tetapi sebelum penggambaran. Setiap pembaruan status yang dipicu oleh pengukuran tersebut menyebabkan React melakukan perenderan ulang secara sinkron dan menerapkan DOM yang telah diperbaiki—semuanya sebelum peramban menampilkan apa pun. Pengguna hanya melihat hasil akhir yang benar dalam satu siklus penggambaran.

Gelembung informasi perlu muncul di dekat elemen pemicunya. Ukur posisi elemen pemicu di dalam useLayoutEffect menggunakan getBoundingClientRect(), hitung posisi mutlak gelembung informasi, lalu tetapkan posisi tersebut dalam status. Gelembung informasi dirender di lokasi yang benar pada tampilan pertama, tanpa lompatan yang terlihat dari posisi awal yang salah.

Untuk menganimasikan elemen dari ukuran alaminya (tanpa batasan) ke ukuran tetap, Anda perlu mengetahui ukuran alaminya sebelum menerapkan batasan tersebut. Baca tinggi elemen di dalam useLayoutEffect sebelum gaya animasi apa pun diterapkan, simpan dalam status, lalu gunakan sebagai nilai bingkai kunci awal untuk transisi CSS.

Ketika halaman memiliki tajuk yang melekat, isi halaman memerlukan ruang dalam atas yang sama dengan tinggi tajuk agar tidak tersembunyi di belakangnya. Ukur tinggi tajuk di dalam useLayoutEffect menggunakan referensi: headerRef.current.getBoundingClientRect().height. Tetapkan nilai ini sebagai paddingTop pada wadah isi. Tata letak sudah benar sejak perenderan pertama.

Ketika Anda memanggil setState di dalam useLayoutEffect, React segera menjalankan siklus perenderan dan penerapan lainnya dalam blok sinkron yang sama. Perenderan ulang ini juga menjalankan useLayoutEffect. Berhati-hatilah agar tidak membuat perulangan tanpa akhir: perbarui status hanya jika pengukuran baru berbeda dari nilai status saat ini.

Di server, elemen DOM tidak ada, sehingga getBoundingClientRect() akan menghasilkan kesalahan atau mengembalikan nol. Lindungi useLayoutEffect dengan pemeriksaan: if (typeof window === 'undefined') return;. Untuk aplikasi SSR, Anda mungkin perlu melakukan hidrasi dengan ukuran pengganti, lalu mengukur setelah hidrasi selesai di sisi klien.

Pengukuran satu kali dengan useLayoutEffect memberi Anda ukuran pada saat pemasangan. Untuk melacak perubahan ukuran saat elemen diubah ukurannya (akibat perubahan ukuran jendela, isi dinamis, atau perubahan CSS), gunakan ResizeObserver. Fungsi ini menjalankan panggilan balik setiap kali ukuran elemen berubah, sehingga lebih cocok untuk komponen responsif.

Jika beberapa efek memerlukan pengukuran yang sama, hitung sekali lalu bagikan melalui konteks atau dengan meneruskannya sebagai properti. Menghitung nilai getBoundingClientRect() yang sama dalam beberapa pemanggilan useLayoutEffect memicu beberapa pembacaan tata letak sinkron, yang masing-masing relatif mahal. Gabungkan pengukuran jika memungkinkan.

Referensi diisi sebelum efek berjalan. Saat useLayoutEffect dijalankan, ref.current dijamin menunjuk ke elemen DOM. Inilah alasan pola tersebut berfungsi: useLayoutEffect(() => { const rect = ref.current.getBoundingClientRect(); ... }, []). Referensi tidak pernah bernilai null di dalam efek tata letak pada komponen yang telah dipasang.

Mengapa lebih baik memanggil getBoundingClientRect() di dalam useLayoutEffect daripada di dalam useEffect?

Gunakan getBoundingClientRect() di dalam useLayoutEffect untuk membaca pengukuran DOM setelah mutasi, tetapi sebelum penggambaran. Pembaruan status dari pengukuran ini menyebabkan perenderan ulang sinkron yang disertakan dalam penggambaran yang sama, sehingga mencegah kedipan. Lindungi dari SSR dengan pemeriksaan typeof window. Untuk pelacakan ukuran berkelanjutan, utamakan ResizeObserver.