React inataka vipengee (components) vyako viwe vinavyotabirika. Ipe hali (state) na sifa (props) zilezile, na inapaswa kuchora UI ileile kila wakati. Lakini programu nyingi halisi haziwezi kuishi ndani ya ule ulimwengu mdogo. Zinahitaji kuunganishwa na nje. Dashibodi inahitaji namba mpya kutoka kwenye seva. Widget ya mazungumzo inahitaji kusikiliza ujumbe. Saa (timer) inahitaji kutembea. Operesheni hizi ni athari pembeni (side effects), na ziko nje ya mzunguko wa uchoraji (render cycle) wa React. Hook ya useEffect ndipo unapoweka kazi hiyo yenye vurugu na isiyotabirika ili kipengee chako chenyewe kibaki safi.

Side Effects: Nini Kinapaswa Kuwa Ndani ya useEffect

Side effect ni kitu chochote kinachogusa ulimwengu wa nje zaidi ya kurudisha JSX. Awamu ya uchoraji (render phase) ya React inapaswa kuwa safi (pure). Unapoanza kuchukua data (fetching data), kuandika kwenye vigezo vya kimataifa (global variables), au kuunganisha wasikilizaji (listeners) kwenye DOM, umetoka katika eneo safi.

Mifano ya kawaida ni pamoja na:

  • Kuchukua data kutoka kwenye API
  • Kuweka saa (timers) au vipindi (intervals)
  • Kuongeza wasikilizaji wa matukio (event listeners) kwenye window au document
  • Kusasisha kichwa cha habari cha tab ya kivinjari (browser tab title)
  • Kuunganishwa na WebSockets

Kazi hizi zina sifa moja: hazipaswi kuwa ndani ya kauli ya kurudisha (return statement) ya kipengee chako au wakati wa mantiki kuu ya uchoraji (main render logic). Kujaribu kuita API ya kivinjari kama setInterval moja kwa moja ndani ya mwili wa uchoraji (render body) kutafanya kazi kila wakati unachora, na kutengeneza saa zinazojirudia na tabia inayochanganya. useEffect ipo hasa ili kutenga kazi hii na kuifanya wakati sahihi.

Jinsi Dependency Array Inavyodhibiti Muda

Hoja ya pili ya useEffect ni dependency array, na ndiyo chanzo kikubwa zaidi cha mkanganyiko kwa watengenezaji wanaohamia kutoka kwenye class components. Ifikirie kama seti ya vigezo ambavyo React inavifuatilia ili kuamua ikiwa itaruka au kutekeleza athari yako (effect) baada ya uchoraji wa sasa.

Kuna mifumo mitatu utakayotumia mara kwa mara.

Bila dependency array kabisa. Ukisahau array hiyo kabisa, React inadhani unataka athari (effect) ifanye kazi baada ya kila uchoraji, ikiwemo ule wa kwanza. Hii mara chache ndiyo unachohitaji. Ikiwa athari yako inafanya ombi la mtandao (network request) au operesheni nzito ya DOM, kuifanya kila unapoandika herufi au kubadilisha hali (state) kutaharibu utendaji (performance). Tumia mfumo huu tu pale unapohitaji kweli kurudia kitu kwa sababu prop au hali yoyote inaweza kuwa imebadilika na huwezi kutaja ni zipi.

Array tupu []. Hii inaiambia React kuendesha athari mara moja, mara tu baada ya kipengee kuunganishwa (mount) na DOM kuwa tayari. Hapa ndipo mahali sahihi kwa ajili ya kuchukua data za awali. Kwa mfano, ikiwa kipengee chako kinapakia data za wasifu wa mtumiaji, unataka ombi hilo lifanye kazi mara moja tu wakati ukurasa wa wasifu unapotokea, si kila wakati mtumiaji anaposhughulika na fomu iliyo chini ya ukurasa.

Array yenye vigezo maalum [count]. Hii ni zana ya usahihi. React inalinganisha thamani za sasa za vigezo hivi (dependencies) dhidi ya thamani zake wakati wa uchoraji uliopita. Ikiwa yoyote kati ya hizo imebadilika, athari inafanya kazi. Ikiwa hakuna chochote kwenye orodha kilichobadilika, React inairuka athari hiyo kabisa.

Ikiwa unasawazisha kichwa cha habari cha tab ya kivinjari na kigezo cha hali (state variable), utakiweka kigezo hicho kwenye dependency array. React itasasisha kichwa cha habari hicho tu wakati thamani hiyo inapobadilika. Ukikiacha, kichwa cha habari kitabaki cha zamani. Ukiongeza vigezo vya hali visivyohusiana, utapoteza muda ukisasasisha kichwa cha habari kwa mabadiliko ambayo hayana maana.

Usafishaji (Cleanup) Si Hiari

Baadhi ya athari huacha alama nyuma. Saa inaendelea kuhesabu. Msikilizaji wa matukio (event listener) unaendelea kufanya kazi. WebSocket inabaki wazi. Kipengee chako kinapoondolewa (unmount), au hata wakati athari inaporudiwa kwa sababu vigezo vyake vimebadilika, React haisafishi mabaki ya athari iliyopita kiotomatiki. Hilo ni kazi yako.

Unatengeneza kazi ya usafishaji (cleanup function) kwa kurudisha kazi (function) kutoka ndani ya useEffect. React huiita usafishaji huu kabla ya kutekeleza athari inayofuata, na mara nyingine tena wakati kipengee kinapoondoka kwenye kioo.

Unapaswa kutumia usafishaji kwa:

  • Kufuta vipindi (intervals) au muda (timeouts) kwa kutumia clearInterval au clearTimeout
  • Kuondoa wasikilizaji wa matukio waliowekwa kwenye window, document, au nodi za nje
  • Kujiondoa kwenye mitiririko ya data (data streams) au huduma

Ukipuuza hili, utapata uvujaji wa kumbukumbu (memory leaks). Kipengee kinaunganishwa (mounts), kinaongeza msikilizaji wa kusogeza ukurasa (scroll listener), kinaondolewa (unmounts), lakini msikilizaji unabaki. Kivinjari kinashikilia callback na nodi za DOM zinazorejelewa. Baada ya muda, hasa katika programu za ukurasa mmoja (single-page applications) zenye ujanja mwingi wa kurasa, haya "maji ya pepo" (ghosts) hujikusanya na kupunguza kasi ya tab. Suluhisho kwa kawaida ni mistari michache tu: rudisha kazi inayofuta kile ulichoongeza.

Makosa ya Kawaida Yanayopelekwa kwenye Uzalishaji (Production)

Hata watengenezaji wenye uzoefu hutumia useEffect wakati kuna chaguo rahisi zaidi. Hapa kuna mifumo mitatu inayopaswa kuleta tahadhari wakati wa mapitio ya kodi.

Mizunguko isiyo na mwisho. Usiwahi kusasisha variable ya state ndani ya useEffect ikiwa variable hiyo hiyo ipo kwenye dependency array yako, isipokuwa kama una sharti la kuzuia linalovunja mzunguko huo. Ikiwa unasoma count, unaiongeza, na kuorodhesha count kama dependency, React itaona mabadiliko, itafanya re-render, itatekeleza effect tena, itaongeza tena, na kuufunga kivinjari.

Effects zisizo za lazima. Usitumie useEffect kukokotoa thamani kutoka kwa props au state zilizopo. Ikiwa unaweza kuipata moja kwa moja wakati wa render, fanya hivyo. Thamani zinazotokana (derived values) zinapaswa kuwa kwenye mwili wa component au kwenye ukokotoaji uliowekwa kwenye memo (memoized calculation) kwa kutumia useMemo. Kuzihamishia kwenye effect kunagawa mantiki yako kati ya hatua za render na effect bila faida yoyote na kufanya kodi kuwa ngumu kueleweka.

Chombo kisichofaa kwa vitendo vya mtumiaji. use