Çfarë është useEffect dhe kur ekzekutohet?

Question

IT Interview Practice · Accepted Answer

`useEffect` ekzekuton **efekte anësore** — punë që del jashtë renderimit të React, si përftimi i të dhënave, abonimet, kohëmatësit ose përditësimet manuale të DOM-it. Ekzekutohet **pas** që komponenti të renderohet, duke mbajtur efektet anësore jashtë trupit të renderimit (renderimi duhet të mbetet i pastër).

## Vargu i varësisë kontrollon kohëzgjidhjeen

```jsx
useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]); // ← dependency array
```

- **`[count]`** → ekzekutohet pas renderimit të parë dhe sa herë që `count` ndryshon.
- **`[]`** (bosh) → ekzekutohet **një herë** pas montimit (mirë për përdorimin njëherësh).
- **i lënë jashtë** → ekzekutohet pas **secilit** rendering (rrallë çfarë do dëshiroje).

## Pastrimi: kthe një funksion

Nëse një efekt krijon diçka që ka nevojë për të qenë e çmontuar, kthe një funksion pastrimi. React e thirrë atë para ekzekutimit të ardhshëm të efektit dhe kur komponenti të çmontohet:

```jsx
useEffect(() => {
  const id = setInterval(() => setN(n => n + 1), 1000);
  return () => clearInterval(id); // cleanup → prevents a leaked timer
}, []);
```

## Pse pastrimi është i rëndësishëm

Pa të, çdo ri-ekzekutim do të shtonte një kohëmatës/abonim tjetër dhe nuk do të hiqte asnjëherë atë të vjetër — një rrjedhje memorjeje klasike. Cikli i jetës për një efekt `[dep]` është: *ekzekuto efektin → (varësia ndryshon) → ekzekuto pastrimin → ekzekuto efektin përsëri*.

**Këshillë:** mos përdor efekte për gjëra që mund të llogaritësh gjatë renderimit (në vend të kësaj, nxirr vlerat) dhe përfshi çdo vlerë që efekti lexon në vargun e varësisë (rregulli i lintimit `react-hooks/exhaustive-deps` ndihmon).

Vargu i varësisë kontrollon kohëzgjidhjeen

Pastrimi: kthe një funksion

Pse pastrimi është i rëndësishëm

Pyetje të ngjashme