useLayoutEffect khác useEffect thế nào?

Thứ tự: render, commit DOM, useLayoutEffect, browser paint, useEffect.

function Tooltip({ children }) {
  const ref = useRef(null);
  const [h, setH] = useState(0);
  useLayoutEffect(() => {
    setH(ref.current.getBoundingClientRect().height);
  }, [children]); // setState ở đây render lại trước khi paint
  return <div ref={ref} style={{ top: -h }}>{children}</div>;
}

• Dùng useLayoutEffect: đo kích thước/vị trí rồi cập nhật ngay, tránh flicker.
• Dùng useEffect: fetch, subscribe, log, mọi side effect không cần chặn paint.
• Effect đồng bộ chạy lâu sẽ làm trễ frame đầu tiên.