useLayoutEffect

useLayoutEffect là một hook trong React, được dùng để xử lý side effects, nhưng khác với useEffect ở thời điểm chúng được thực thi trong vòng đời render của component.

useLayoutEffect được chạy sau khi React đã cập nhập DOM, nhưng trước khi trình duyệt vẽ lại UI. (Chặn paint cho đến khi effect hoàn tất).

Được sử dụng khi cần đo đạc layout (kích thước, vị trí), hoặc thay đổi DOM trước khi người dùng nhìn thấy. Giúp tránh hiện tượng “flicker”.

Tuy nhiên nếu dùng sai hoặc lạm dụng có thể ảnh hưởng đến hiệu năng, gây lag.

import { useLayoutEffect, useRef } from "react";
 
function LayoutExample() {
  const boxRef = useRef();
 
  useLayoutEffect(() => {
    const box = boxRef.current;
    const width = box.offsetWidth;
    console.log("Box width:", width);
    box.style.width = width / 2 + "px"; // thay đổi layout trước khi paint
  }, []);
 
  return <div ref={boxRef} style={{ width: "200px", height: "100px", background: "lightblue" }} />;
}