When would you use useLayoutEffect instead of useEffect?

Both effects run after React commits DOM changes. The difference is timing. useLayoutEffect runs before the browser paints, so a state update inside it is applied before the user sees the frame. useEffect runs after paint, which is usually what you want because it does not block rendering.

function Tooltip({ targetRef, children }) {
  const tooltipRef = useRef(null);
  const [position, setPosition] = useState({ top: 0, left: 0 });

  useLayoutEffect(() => {
    const target = targetRef.current;
    const tooltip = tooltipRef.current;
    if (!target || !tooltip) return;

    const rect = target.getBoundingClientRect();
    setPosition({ top: rect.bottom + 8, left: rect.left });
  }, [targetRef]);

  return (
    <div ref={tooltipRef} style={{ position: "fixed", ...position }}>
      {children}
    </div>
  );
}

How to choose

• Default to useEffect; it keeps the browser responsive
• Use useLayoutEffect for DOM measurements that must affect the next paint
• Avoid expensive synchronous work in useLayoutEffect because it blocks painting
• Remember that useLayoutEffect does not run during server rendering

A common mistake is reaching for useLayoutEffect to "run earlier" without a layout reason. That can make the app feel slower and can trigger server-rendering warnings. If the work does not need to happen before paint, it belongs in useEffect.