Beide führen effects aus, aber zu unterschiedlichen Zeitpunkten relativ zum Browser-Rendering — und genau dieser Timing-Unterschied ist der ganze Sinn.
useEffect läuft nachdem der Browser gerendert hat. Es ist asynchron und nicht-blockierend. Nutze es für fast alles (Daten, Subscriptions, Logging).useLayoutEffect läuft . Nutze es, wenn du das Layout lesen und das DOM im selben Frame ändern musst, um Flackern zu vermeiden.render → DOM updated → [useLayoutEffect runs] → browser paints → [useEffect runs]
Stelle dir vor, du misst ein Element und positionierst einen Tooltip basierend auf seiner Größe neu. Mit useEffect würde der Nutzer den Tooltip kurz an der falschen Stelle sehen, dann springt er:
useLayoutEffect(() => {
const { height } = ref.current.getBoundingClientRect();
setTooltipTop(-height); // applied BEFORE paint → no visible jump
}, []);
Mit useEffect läuft derselbe Code nach dem Rendering → ein Frame-Flackern.
useLayoutEffect machen die UI ruckelig, weil der Browser nicht rendern kann, bis es fertig ist.Faustregel: Nutze standardmäßig useEffect; verwende useLayoutEffect nur für synchrone DOM-Messungen/Mutationen, die sonst flackern würden.