Was ist der Unterschied zwischen useEffect und useLayoutEffect?

Question

IT Interview Practice · Accepted Answer

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 **synchron nachdem das DOM mutiert wurde, aber VOR dem Browser-Rendering**. Nutze es, wenn du das Layout lesen und das DOM im selben Frame ändern musst, um Flackern zu vermeiden.

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

## Warum es wichtig ist

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:

```jsx
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.

## Warum du es nicht standardmäßig verwenden solltest

- Es **blockiert das Rendering**: schwere Arbeiten in `useLayoutEffect` machen die UI ruckelig, weil der Browser nicht rendern kann, bis es fertig ist.
- Es **warnt bei SSR** (es kann nicht auf dem Server laufen, wo es kein Layout gibt).

**Faustregel:** Nutze standardmäßig `useEffect`; verwende `useLayoutEffect` nur für synchrone DOM-Messungen/Mutationen, die sonst flackern würden.

Warum es wichtig ist

Warum du es nicht standardmäßig verwenden solltest

Ähnliche Fragen