useEffect inaendesha athari za upande — kazi inayofikia nje ya utendakazi wa React, kama ukusanyaji wa data, ushirikishaji, timers, au updates za manual DOM. Inaendesha baada ya sehemu ya kawaida kuonekana, kuweka athari za upande nje ya mwili wa render (render lazima ibaki safi).
useEffect(() => {
document.title = `Count: `;
}, [count]);
[count] → inataendesha baada ya kawaida ya kwanza na kila wakati count inabadilika.[] (tupu) → inataendesha mara moja baada ya kupanda (nzuri kwa mfumo wa mara moja).Ikwa athari inaweka kitu kinachohitaji kusasanywa, rudisha kazi ya kusafisha. React inaita kabla ya matumizi ya athari inayofuata na wakati sehemu hiyo inapokupwa:
useEffect(() => {
const id = setInterval(() => setN(n => n + 1), 1000);
return () => clearInterval(id); // cleanup → prevents a leaked timer
}, []);
Bila hiyo, kila tathmini ingefanya kitu kingine timer/ushirikishaji na hakikisha kamwe kuondoa ile ya zamani — ufungaji wa kumbukumbu wa kawaida. Mzunguko wa maisha kwa athari ya [dep] ni: endesha athari → (dep inabadilika) → endesha kusafisha → endesha athari tena.
Kidokezo: usitumie athari kwa kitu unachoweza kukadiria wakati wa render (tumia thamani badala yake), na fanya ujinga kila thamani ambayo athari inasoma katika safu ya utegemezi (sheria ya react-hooks/exhaustive-deps lint inasaidia).