Båda kör effekter, men vid olika tidpunkter i förhållande till webbläsarens rendering — och den tidsskillnaden är själva poängen.
useEffect körs efter att webbläsaren har renderat. Det är asynkront och icke-blockerande. Använd det för nästan allt (data, prenumerationer, loggning).useLayoutEffect körs synkront efter att DOM har muterades men FÖRE webbläsaren renderar. Använd det när du måste läsa layout och ändra DOM i samma frame för att undvika ett synligt flimmer.render → DOM updated → [useLayoutEffect runs] → browser paints → [useEffect runs]
Imaginera att mäta ett element och ompositionera en tooltip baserat på dess storlek. Med useEffect skulle användaren kortfattat se tooltip på fel plats, sedan hoppar den:
useLayoutEffect(() => {
const { height } = ref.current.getBoundingClientRect();
setTooltipTop(-height); // applied BEFORE paint → no visible jump
}, []);
Med useEffect körs samma kod efter rendering → ett flimmer på en frame.
useLayoutEffect gör att gränssnittet känns hakigt, eftersom webbläsaren inte kan rendera förrän det är färdigt.Tumregel: standardisera useEffect; använd endast useLayoutEffect för synkrona DOM-mätningar/mutationer som annars skulle flimra.