Programu za React zinajengwa kutokana na components, na kila component ina maisha yake. Inaonekana kwenye skrini. Inaitikia taarifa mpya. Hatimaye inatoweka. Ukipuuza mdundo huo, gharama yake ni halisi. Memory leaks huanza kuingia. Utendaji wa render hupungua. Watumiaji wanabonyeza vitufe ambavyo havijibu tena kwa sababu component iliyounganishwa navyo iliondolewa (unmounted) dakika kumi zilizopita lakini event listener bado ipo hai. Kuelewa lifecycle ya component si zoezi la kitaaluma tu. Ni msingi wa kuandika programu inayobaki kuwa ya kuaminika wakati wa matumizi halisi.
Fikiria uwepo wa component katika hatua tatu. Watengenezaji mara nyingi huzielezea kama kuzaliwa, kukua, na kufa. React inaziita mounting, updating, na unmounting. Kila hatua ina kazi yake maalum, na kila moja inakupa wakati sahihi wa kuendesha kodi au kuisafisha.
Awamu Tatu
Mounting ni kuzaliwa. Component inatengenezwa na kuingizwa kwenye browser DOM kwa mara ya kwanza. Hii ndiyo dirisha lako la kusanidi (setup). Ikiwa component inahitaji data za mbali, huu ndio wakati wa kuziomba. Ikiwa inahitaji state ya awali iliyopigiwa hesabu kutokana na props, unafanya hivyo hapa. Katika enzi ya class component, hii ilikuwa eneo la componentDidMount. Kwa functional components za kisasa, unaishughulikia kwa useEffect na dependency array tupu. Muhimu ni kwamba kizuizi hiki cha kodi hukimbia mara moja, mara tu baada ya React kuweka element kwenye ukurasa. Hiyo inafanya iwe bora kwa usanidi wa mara moja kama vile kupata wasifu wa mtumiaji au kusoma thamani kutoka localStorage.
Updating ni kukua. Component iliyomo (mounted) haikai tuli. Props zinakuja kutoka kwa mzazi (parent). State inabadilika kutokana na mwingiliano wa mtumiaji. Mzazi mwenyewe una-re-render, na kumlazimisha mtoto (child) kufuata. Kisha React inafanya re-render ya component ili kuweka UI katika uwiano na data yako. Awamu hii hujirudia mara nyingi wakati wa maisha ya component. Kila wakati dependency inapobadilika, effects zako hukimbia tena, na component inatoa matokeo mapya kwenye DOM. Kwa sababu awamu hii huchochewa mara kwa mara, ndipo matatizo mengi ya utendaji huanzia. Kazi zisizo za lazima hapa huongezeka kwa kasi.
Unmounting ni kufa. Component inaondoka kwenye skrini, labda kwa sababu mtumiaji alihamia ukurasa mwingine au conditional render ilizimwa. Katika hatua hii, component inaharibiwa, lakini ulimwengu wa nje haujui hilo kila wakati. Timers zinaendelea kuhesabu. WebSockets zinaendelea kusikiliza. Event listeners kwenye object ya window zinabaki zimeunganishwa. Ikiwa hutasafisha hizi, zinashikilia marejeo (references) ya components zilizokufa na kusababisha memory leaks. Browser inapoteza nguvu kwenye "mizimu". React inakupa cleanup function hasa ili uweze kusimamisha intervals, kufunga miunganisho, na kuondoa listeners kabla ya component kutoweka kabisa.
Kutoka Class Methods hadi Hooks
Kwa miaka mingi, wahandisi wa React walisimamia awamu hizi kupitia class components. Mantiki (logic) iligawanywa katika mbinu (methods) tofauti. Ulichukua data ndani ya componentDidMount, ulijibu mabadiliko ya props ndani ya componentDidUpdate, na uliifanya usafi ndani ya componentWillUnmount. Tatizo lilikuwa kwamba mantiki inayohusiana iliishia kutawanyika. Kipengele kimoja, kama vile muunganisho wa live chat, kilihitaji kodi katika lifecycle methods tatu tofauti ili tu kuunganisha, kuangalia mabadiliko ya thread, na kujitenga.
Hooks zilibadilisha hilo. Hook ya useEffect katika functional components inakuwezesha kuunganisha mantiki kwa madhumuni badala ya awamu ya lifecycle. Hata hivyo, mfumo wa kifikra (mental model) unaendana vizuri ikiwa unajua wapi pa kutazama.
Ili kushughulikia mounting, andika useEffect(() => { ... }, []). Dependency array tupu inaiambia React kuwa effect hii haina dependencies za nje, hivyo inakimbia baada tu ya render ya awali. Hii inachukua nafasi ya componentDidMount.
Ili kushughulikia updates, jumuisha thamani mahususi ambazo React inapaswa kuzifuatilia: useEffect(() => { ... }, [dependency]). Wakati dependency inapobadilika kati ya renders,