Beide voeren effects uit, maar op verschillende momenten ten opzichte van de browser paint — en dat timing-verschil is het hele punt.
useEffect draait nadat de browser geschilderd heeft. Het is asynchron en niet-blokerend. Gebruik het voor zo goed als alles (gegevens, abonnementen, logging).useLayoutEffect draait . Gebruik het wanneer je lay-out moet lezen en de DOM in hetzelfde frame moet wijzigen om een zichtbaar flikkeren te voorkomen.render → DOM updated → [useLayoutEffect runs] → browser paints → [useEffect runs]
Steel je voor dat je een element meet en een tooltip opnieuw positioneert op basis van de grootte ervan. Met useEffect zou de gebruiker de tooltip op de verkeerde plek zien, en dan springt het:
useLayoutEffect(() => {
const { height } = ref.current.getBoundingClientRect();
setTooltipTop(-height); // applied BEFORE paint → no visible jump
}, []);
Met useEffect draait dezelfde code na het schilderen → één frame flikkering.
useLayoutEffect maakt de UI voelen hakken, omdat de browser niet kan schilderen totdat het klaar is.Vuistregel: standaard useEffect; gebruik alleen useLayoutEffect voor synchrone DOM-metingen/mutaties die anders zou flikkeren.