Mitä eroa on useEffect ja useLayoutEffect välillä?

Question

Accepted Answer

Molemmat suorittavat effecteja, mutta **eri aikoina suhteessa selaimen piirtoon** — ja juuri tämä ajoitus-ero on koko pointti.

- **`useEffect`** suoritetaan **sen jälkeen**, kun selain on piirtänyt. Se on asynkroninen ja ei-estävä. Käytä sitä lähes kaikkeen (data, tilaukset, lokitus).
- **`useLayoutEffect`** suoritetaan **synkronisesti sen jälkeen, kun DOM on muokattu, mutta ENNEN kuin selain piirtää**. Käytä sitä, kun sinun on luettava asettelu ja muutettava DOM samassa framessa välttääksesi näkyvää välähdystä.

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

## Miksi sinulla olisi koskaan tarvetta useLayoutEffect:lle

Kuvittele mitataan elementtiä ja sijoitetaan työkaluvihje uudelleen sen koon perusteella. useEffect:llä käyttäjä näkisi työkaluvihjeen hetken väärässä paikassa, sitten se hyppää:

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

useEffect:llä sama koodi suoritetaan piirtämisen jälkeen → yhden framen välähdys.

## Miksi et pitäisi valita sitä oletuksena

- Se **estää piirtämisen**: raskas työ `useLayoutEffect`:ssä tekee käyttöliittymästä nykivää, koska selain ei voi piirtää kunnes se on valmis.
- Se **varoittaa SSR:n aikana** (se ei voi suorittaa palvelimella, jossa ei ole asettelua).

**Peukalosääntö:** käytä oletuksena `useEffect`:ä; käytä `useLayoutEffect`:ä vain synkronisille DOM-mittauksille/mutaatioille, jotka muuten välähtäisivät.