Detail Info

Kita akan menampilkan teks dan secara otomatis menyesuaikan tinggi box berdasarkan lebar teks sebelum browser merender ke layar.

Perbedaan utama useEffect vs useLayoutEffect:

useEffect dijalankan setelah semua render selesai dan layar di-paint.
useLayoutEffect dijalankan sebelum layar di-paint, cocok untuk pengukuran dan manipulasi DOM agar tidak terjadi flicker.

Kode:

jsxCopyEditimport React, { useRef, useState, useLayoutEffect } from 'react';

function LayoutEffectBox() {
  const boxRef = useRef(null);
  const [boxHeight, setBoxHeight] = useState(0);

  useLayoutEffect(() => {
    if (boxRef.current) {
      const height = boxRef.current.getBoundingClientRect().height;
      setBoxHeight(height);
    }
  }, []);

  return (
    <div>
      <div ref={boxRef} style={{ fontSize: '24px', padding: '1rem', border: '1px solid black' }}>
        Ini adalah teks yang akan diukur tinggi box-nya.
      </div>
      <p>Tinggi box: {boxHeight.toFixed(2)} px</p>
    </div>
  );
}

Penjelasan useLayoutEffect:

Digunakan untuk pengukuran atau manipulasi layout DOM sebelum render terlihat.
Sangat penting untuk menghindari layout shift atau visual flicker.

useLayoutEffect – Ukur dan Sesuaikan Lebar Elemen