React hook: useLayoutEffect แบบสั้นๆ

useLayoutEffect เป็น hook ที่คล้ายกับ useEffect แต่มันถูกเรียกใช้งานแบบ synchronously หลังจากการเปลี่ยนแปลง DOM ทั้งหมด ซึ่งทำให้มันเป็นประโยชน์ในการจัดการ DOM ทันทีหลังจากที่คอมโพเนนต์ถูกเรนเดอร์

ตัวอย่างวิธีใช้ useLayoutEffect เพื่อวัดขนาดขององค์ประกอบ:

import React, { useState, useLayoutEffect, useRef } from "react";

function ResizableBox() {
  const [width, setWidth] = useState(100);
  const [height, setHeight] = useState(100);
  const boxRef = useRef(null);

  useLayoutEffect(() => {
    const handleResize = () => {
      setWidth(boxRef.current.clientWidth);
      setHeight(boxRef.current.clientHeight);
    };

    handleResize();

    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return (
    <div
      ref={boxRef}
      style={{ width: "50%", height: "50%", backgroundColor: "red" }}
    >
      <p>Width: {width}px</p>
      <p>Height: {height}px</p>
    </div>
  );
}

ในตัวอย่างนี้ เรากำหนดคอมโพเนนต์ ResizableBox ที่ใช้ useLayoutEffect hook เพื่อวัดขนาดขององค์ประกอบ div จากนั้นเราจะใช้ค่าขนาดในการเรนเดอร์ความกว้างและความสูงของกล่อง ตัว hook ยังเพิ่มและลบตัวฟังก์ชันการฟังเหตุการณ์การปรับขนาดเพื่ออัปเดตค่าขนาดเมื่อปรับขนาดหน้าต่าง