Mi az `useEffect` és mikor fut le?

Question

IT Interview Practice · Accepted Answer

Az `useEffect` **mellékhatásokat** futtat le — olyan munkát, amely a React renderelésén túlmegy, mint az adatok lekérése, feliratkozások, időzítők vagy kézi DOM-frissítések. Az **után** fut le, hogy az összetevő renderel, az oldalhatásokat a render-törzs közül kimaradva tartva (a render-nek tisztának kell maradnia).

## A függőség-tömb szabályozza az időzítést

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

- **`[count]`** → az első renderelés után és bármikor, amikor a `count` megváltozik, lefut.
- **`[]`** (üres) → csatlakozás után **egyszer** lefut (jó az egyszeri beállításhoz).
- **elhagyott** → **minden** renderelés után lefut (ritkán az, amit akarsz).

## Takarítás: függvényt adjunk vissza

Ha egy hatás olyan valamit állít be, amit fel kell bontani, adjunk vissza egy takarító függvényt. A React az előző hatásfutás előtt és az összetevő lecsatlakozásakor hívja meg:

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

## Miért fontos a takarítás

Anélkül minden újrafutás hozzáadna egy másik időzítőt/feliratkozást, és soha nem távolítaná el a régit — klasszikus memóriaszivárgás. A `[dep]` hatás életciklusa: *hatás futtatása → (dep változások) → takarítás futtatása → hatás futtatása újra*.

**Tipp:** ne használj hatásokat olyan dolgokhoz, amelyeket a renderelés során ki tudsz számítani (helyette származtass értékeket), és az összes értéket, amelyet a hatás olvas, vedd fel a függőség-tömbbe (a `react-hooks/exhaustive-deps` lint szabály segít).

A függőség-tömb szabályozza az időzítést

Takarítás: függvényt adjunk vissza

Miért fontos a takarítás

Kapcsolódó kérdések