Jaký je rozdíl mezi useEffect a useLayoutEffect?

Question

IT Interview Practice · Accepted Answer

Oba spouštějí effects, ale v **různých momentech vůči vykreslení prohlížeče** — a právě tento časový rozdíl je celý smysl.

- **`useEffect`** se spustí **poté**, co prohlížeč vykreslí stránku. Je asynchronní a neblokující. Použijte ho na skoro všechno (data, odběry, logování).
- **`useLayoutEffect`** se spustí **synchronně poté, co je DOM změněn, ale PŘED vykreslením prohlížeče**. Použijte ho, když musíte přečíst rozložení a změnit DOM ve stejném snímku, abyste se vyhnuli viditelné chvění.

```text
render → DOM updated → [useLayoutEffect runs] → browser paints → [useEffect runs]
```

## Proč byste někdy potřebovali useLayoutEffect

Představte si, že měříte prvek a přemisťujete popis vzhledem k jeho velikosti. S `useEffect` by uživatel krátce viděl popis na špatném místě a pak by se posunul:

```jsx
useLayoutEffect(() => {
  const { height } = ref.current.getBoundingClientRect();
  setTooltipTop(-height); // applied BEFORE paint → no visible jump
}, []);
```

S `useEffect` běží stejný kód po vykreslení → chvění v jednom snímku.

## Proč ho nemáte používat ve výchozím nastavení

- **Blokuje vykreslování**: těžká práce v `useLayoutEffect` činí uživatelské rozhraní trhavým, protože prohlížeč nemůže vykreslit, dokud se nedokončí.
- **Varuje během SSR** (nemůže běžet na serveru, kde není žádné rozložení).

**Praktické pravidlo:** defaultně používejte `useEffect`; `useLayoutEffect` používejte pouze pro synchronní měření/změny DOM, která by jinak chvěla.

Proč byste někdy potřebovali useLayoutEffect

Proč ho nemáte používat ve výchozím nastavení

Související otázky