useLayoutEffect – Ukur dan Sesuaikan Lebar Elemen

• 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.

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>
  );
}

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