Koks yra skirtumas tarp useEffect ir useLayoutEffect?

Question

IT Interview Practice · Accepted Answer

Abu vykdo efektus, bet **skirtingais momentais, palyginti su naršyklės piešimu** — ir tas laiko skirtumas yra visas tikslas.

- **`useEffect`** vykdomas **po to**, kai naršyklė jau nupiešė. Jis yra asinchroninis ir neblokavimas. Naudokite beveik viskam (duomenims, prenumeratomams, žurnalizavimui).
- **`useLayoutEffect`** vykdomas **sinchroniškai po DOM pakeitimo, bet PRIEŠ naršyklę piešiant**. Naudokite, kai turite perskaityti makietą ir pakeisti DOM tame pačiame kadre, kad išvengtumėte matomos mirksėjimo.

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

## Kodėl jums gali prireikti useLayoutEffect

Įsivaizduokite išmatuojant elementą ir pakartotinai nustatant priemonės padėtį pagal jos dydį. Su `useEffect`, naudotojas trumpam pamatytų priemonę neteisinguose keliuose, tada ji šoktų:

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

Su `useEffect`, tas pats kodas vykdomas po piešimo → vieno kadro mirksėjimas.

## Kodėl to nereikėtų pasiekti pagal numatytuosius nustatymus

- Tai **blokuoja piešimą**: sunkus darbas `useLayoutEffect` daro UI grubiu, nes naršyklė negali piešti, kol jis baigiasi.
- Tai **perspėja SSR metu** (jis negali veikti serveryje, kur nėra maketo).

**Nykščio taisyklė:** pagal numatytuosius nustatymus `useEffect`; naudokite `useLayoutEffect` tik sinchroniškiems DOM matavimams/mutacijoms, kurie kitu atveju mirksėtų.

Kodėl jums gali prireikti useLayoutEffect

Kodėl to nereikėtų pasiekti pagal numatytuosius nustatymus

Susiję klausimai