useLayoutEffect hook

Esegui effetti sincroni legati a misure e layout.

Differenza da useEffect

useLayoutEffect è pensato per misurazioni o aggiornamenti che devono avvenire prima che l'utente veda il frame finale.

function AutoHeightPanel({ open }) {
  const ref = useRef();
  const [height, setHeight] = useState(0);

  useLayoutEffect(() => {
    setHeight(open ? ref.current.scrollHeight : 0);
  }, [open]);

  return html`<div ref=${ref} style=${{ maxHeight: `${height}px` }}>...</div>`;
}

Usalo solo quando serve davvero. Per fetch, listener e side effect comuni preferisci useEffect.