Cila është ndryshimi midis useEffect dhe useLayoutEffect?

Question

Accepted Answer

Të dy ekzekutojnë efekte, por në **momente të ndryshme në lidhje me pikturën e shfletuesit** — dhe kjo ndryshim i kohëzgjatjes është përkatësisht tërësia e temës.

- **`useEffect`** ekzekutohet **pas** që shfletuesi të ketë pikturuar. Është asinkron dhe jo-bllokues. Përdore për pothuajse gjithçka (të dhëna, pajtim, regjistrimi).
- **`useLayoutEffect`** ekzekutohet **sinkronisht pas mutacionit të DOM, por PARA se shfletuesi të pikturojë**. Përdore kur duhet të lexosh formatimin dhe të ndryshosh DOM në të njëjtën kuadër për të shmangur një dritë të dukshme.

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

## Pse do ta duhej ndonjëherë

Paraqit vetes se matni një element dhe rireposiciononi një sugjerim bazuar në madhësinë e tij. Me `useEffect`, përdoruesi do të shihte për pak kohë sugjerimin në vend të gabuar, pastaj ai kërcen:

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

Me `useEffect`, e njëjta kod ekzekutohet pas pikturës → një dritë e kuadrit të vetëm.

## Pse nuk duhet ta arrish atë me parazgjedhje

- Ai **bllokon pikturën**: puna e rëndë në `useLayoutEffect` e bën ndërfaqen të ndjehet lëkundshëm, sepse shfletuesi nuk mund të pikturojë derisa të përfundojë.
- Ai **paralajmëron gjatë SSR** (nuk mund të ekzekutohet në server, ku nuk ka formatim).

**Rregulli i madh:** parazgjedhje ndaj `useEffect`; vetëm përdor `useLayoutEffect` për matjet/mutacionet sinkrone të DOM që do të dritesoheshin ndryshe.