Kokie yra dažni klaidai dirbant su useEffect priklausomybių masyvu ir valymu?

Question

IT Interview Practice · Accepted Answer

Efektas iš naujo paleidžiamas pagal jo **priklausomybes**, ir neteisingai nustatytas masyvas yra #1 React klaidų šaltinis.

## Nuklydimas 1: trūkstamos priklausomybės → pasenę reikšmės

Efektas uždaro reikšmes iš render'io, kuriame jis buvo sukurtas. Jei praleidi priklausomybę, jis ir toliau naudoja senąją:

```jsx
useEffect(() => {
  const id = setInterval(() => {
    console.log(count); // ❌ always logs the count from the FIRST render (0)
  }, 1000);
  return () => clearInterval(id);
}, []); // empty deps → effect never re-created → `count` frozen at 0
```

Sprendimas: arba pridėk `count` prie deps, arba naudok funkcinį atnaujintoją, kuriam tai nereikalinga (`setCount(c => c + 1)`).

## Nuklydimas 2: nestabili priklausomybės → efektas paleidžiamas kiekviename render'yje

Objektai/masyvai/funkcijos yra iš naujo sukuriami kiekvieną kartą, kai atliekamas render'is, todėl jie yra "nauji" kiekvieną kartą ir efektas niekada nenurimsta:

```jsx
const options = { id }; // ❌ new object every render
useEffect(() => { load(options); }, [options]); // runs every render
```

Sprendimas: priklausyk nuo primityvo (`[id]`), arba memoizuok su `useMemo`/`useCallback`.

## Nuklydimas 3: pamirštas valymas → nuotėkiai ir lenktynės

```jsx
useEffect(() => {
  const ctrl = new AbortController();
  fetch(url, { signal: ctrl.signal }).then(setData);
  return () => ctrl.abort(); // cancels the old request when `url` changes
}, [url]);
```

Be valymo, lėta ankstesnė užklausa galėtų išspręsti *po* naujesnes ir perrašyti šviežius duomenis (lenktynės sąlyga), ir prenumeratos/laikmačiai kauptųsi. `react-hooks/exhaustive-deps` ESLint taisyklė sužymi daugumą trūkstamų priklausomybių atvejų.

Nuklydimas 1: trūkstamos priklausomybės → pasenę reikšmės

Nuklydimas 2: nestabili priklausomybės → efektas paleidžiamas kiekviename render'yje

Nuklydimas 3: pamirštas valymas → nuotėkiai ir lenktynės

Susiję klausimai