Oba uruchamiają efekty, ale w różnych momentach względem rysowania przez przeglądarkę — a różnica w czasie to właśnie cały punkt.
useEffect uruchamia się po tym, jak przeglądarka narysuje. Jest asynchroniczny i nieblokujący. Używaj go do prawie wszystkiego (dane, subskrypcje, logowanie).useLayoutEffect uruchamia się . Używaj go, gdy musisz odczytać layout i zmienić DOM w tej samej klatce, aby uniknąć widocznego migotania.render → DOM updated → [useLayoutEffect runs] → browser paints → [useEffect runs]
Wobraź sobie, że mierzysz element i zmieniam pozycję tooltip na podstawie jego rozmiaru. Z useEffect użytkownik na krótko widzi tooltip w złym miejscu, a następnie skoczy:
useLayoutEffect(() => {
const { height } = ref.current.getBoundingClientRect();
setTooltipTop(-height); // applied BEFORE paint → no visible jump
}, []);
Z useEffect ten sam kod uruchamia się po rysowaniu → migotanie w jednej klatce.
useLayoutEffect sprawia, że interfejs użytkownika jest nierówny, ponieważ przeglądarka nie może rysować, dopóki się nie skończy.Złota zasada: domyślnie używaj useEffect; useLayoutEffect tylko do synchronicznych pomiarów/mutacji DOM, które inaczej by migotały.