React એપ્લિકેશન્સ ઘટકો (components) થી બનેલી હોય છે, અને દરેક ઘટક એક જીવન જીવે છે. તે સ્ક્રીન પર દેખાય છે. તે નવી માહિતી પર પ્રતિક્રિયા આપે છે. અંતે તે અદૃશ્ય થઈ જાય છે. જો તમે આ લયને અવગણશો, તો તેની કિંમત ચૂકવવી પડશે. મેમરી લીક (Memory leaks) થવા લાગે છે. રેન્ડર પર્ફોર્મન્સ (Render performance) ઘટે છે. વપરાશકર્તાઓ એવા બટનો પર ક્લિક કરે છે જે હવે પ્રતિસાદ આપતા નથી, કારણ કે તેની સાથે જોડાયેલ ઘટક દસ મિનિટ પહેલા અનમાઉન્ટ (unmounted) થઈ ગયો હતો પરંતુ ઇવેન્ટ લિસનર (event listener) હજુ પણ સક્રિય છે. ઘટકના લાઇફસાયકલ (component lifecycle) ને સમજવું એ માત્ર એક શૈક્ષણિક અભ્યાસ નથી. તે વાસ્તવિક ઉપયોગમાં વિશ્વસનીય રહે તેવા સોફ્ટવેર લખવાનો પાયો છે.

ઘટકના અસ્તિત્વને ત્રણ તબક્કાઓમાં વિચારો. ડેવલપર્સ ઘણીવાર તેને જન્મ, વિકાસ અને મૃત્યુ તરીકે વર્ણવે છે. React તેને mounting, updating અને unmounting કહે છે. દરેક તબક્કાનું ચોક્કસ કાર્ય હોય છે, અને દરેક તમને કોડ ચલાવવા અથવા તેને સાફ (clean up) કરવા માટે ચોક્કસ ક્ષણ આપે છે.

ત્રણ તબક્કાઓ

Mounting એ જન્મ છે. ઘટક બનાવવામાં આવે છે અને પ્રથમ વખત બ્રાઉઝર DOM માં દાખલ કરવામાં આવે છે. આ તમારો સેટઅપ વિન્ડો છે. જો ઘટકને રિમોટ ડેટાની જરૂર હોય, તો આ તે સમય છે જ્યારે તમે તેની વિનંતી કરો છો. જો તેને props માંથી ગણતરી કરેલ પ્રારંભિક સ્ટેટ (initial state) ની જરૂર હોય, તો તમે તે અહીં કરો છો. ક્લાસ કમ્પોનન્ટના યુગમાં, આ componentDidMount નું ક્ષેત્ર હતું. આધુનિક ફંક્શનલ કમ્પોનન્ટ્સ સાથે, તમે તેને useEffect અને ખાલી ડિપેન્ડન્સી એરે (empty dependency array) દ્વારા હેન્ડલ કરો છો. મુખ્ય વિગત એ છે કે કોડનો આ બ્લોક React દ્વારા પેજમાં એલિમેન્ટ મૂક્યા પછી તરત જ એક જ વાર ચાલે છે. તે યુઝર પ્રોફાઇલ ફેચ કરવા અથવા localStorage માંથી વેલ્યુ વાંચવા જેવા વન-ટાઇમ સેટઅપ માટે આદર્શ બનાવે છે.

Updating એ વિકાસ છે. માઉન્ટ થયેલ ઘટક સ્થિર રહેતું નથી. પેરેન્ટ (parent) તરફથી props આવે છે. યુઝર ઇન્ટરેક્શનથી સ્ટેટ (state) બદલાય છે. પેરેન્ટ પોતે જ રી-રેન્ડર (re-render) થાય છે, જેનાથી ચાઇલ્ડ (child) ને પણ અનુસરવા માટે મજબૂર કરવામાં આવે છે. React પછી તમારા ડેટા સાથે UI ને સિંક (sync) રાખવા માટે ઘટકને રી-રેન્ડર કરે છે. ઘટકના જીવન દરમિયાન આ તબક્કો ઘણી વખત પુનરાવર્તિત થાય છે. જ્યારે પણ ડિપેન્ડન્સી બદલાય છે, ત્યારે તમારા ઇફેક્ટ્સ (effects) ફરીથી ચાલે છે, અને ઘટક DOM માં નવો આઉટપુટ આપે છે. આ તબક્કો વારંવાર ટ્રિગર થતો હોવાથી, અહીં મોટાભાગની પર્ફોર્મન્સ સમસ્યાઓ શરૂ થાય છે. અહીં થતું બિનજરૂરી કામ ઝડપથી વધી જાય છે.

Unmounting એ મૃત્યુ છે. ઘટક સ્ક્રીન પરથી નીકળી જાય છે, કદાચ કારણ કે વપરાશકર્તા બીજા પેજ પર ગયો હોય અથવા કન્ડીશનલ રેન્ડર (conditional render) બંધ થઈ ગયું હોય. આ સમયે, ઘટક નાશ પામે છે, પરંતુ બહારની દુનિયાને હંમેશા તેની જાણ હોતી નથી. ટાઈમર્સ ચાલતા રહે છે. WebSockets સાંભળતા રહે છે. window ઓબ્જેક્ટ પરના ઇવેન્ટ લિસનર્સ જોડાયેલા રહે છે. જો તમે આને સાફ નહીં કરો, તો તેઓ મૃત ઘટકોના સંદર્ભો (references) ધરાવે છે અને મેમરી લીક કરે છે. બ્રાઉઝર ભૂતિયા (ghosts) પ્રોસેસ પર સાયકલ વેડફે છે. React તમને ચોક્કસપણે એક ક્લીનઅપ ફંક્શન (cleanup function) આપે છે જેથી તમે ઘટક કાયમ માટે અદૃશ્ય થઈ જાય તે પહેલાં ઇન્ટરવલ (intervals) રોકી શકો, કનેક્શન બંધ કરી શકો અને લિસનર્સ દૂર કરી શકો.

ક્લાસ મેથડ્સથી હૂક્સ સુધી

વર્ષો સુધી, React એન્જિનિયરોએ ક્લાસ કમ્પોનન્ટ્સ દ્વારા આ તબક્કાઓનું સંચાલન કર્યું હતું. લોજિક અલગ-અલગ મેથડ્સમાં વહેંચાયેલું હતું. તમે componentDidMount ની અંદર ડેટા ફેચ કરતા હતા, componentDidUpdate ની અંદર prop ફેરફારોનો પ્રતિસાદ આપતા હતા, અને componentWillUnmount ની અંદર સફાઈ (cleanup) કરતા હતા. સમસ્યા એ હતી કે સંબંધિત લોજિક વિખરાયેલું રહેતું હતું. એક સિંગલ ફીચર, જેમ કે લાઈવ ચેટ કનેક્શન, ફક્ત કનેક્ટ કરવા, થ્રેડ ફેરફારો તપાસવા અને ડિસ્કનેક્ટ કરવા માટે ત્રણ અલગ-અલગ લાઇફસાયકલ મેથડ્સમાં કોડની જરૂર પડતી હતી.

હૂક્સ (Hooks) એ આ બદલી નાખ્યું. ફંક્શનલ કમ્પોનન્ટ્સમાં useEffect હૂક તમને લાઇફસાયકલ તબક્કાને બદલે હેતુ મુજબ લોજિકને ગ્રુપ કરવાની મંજૂરી આપે છે. તેમ છતાં, જો તમે જાણતા હોવ કે ક્યાં જોવું, તો મેન્ટલ મોડેલ સ્પષ્ટ રીતે મેપ થાય છે.

માઉન્ટિંગ હેન્ડલ કરવા માટે, useEffect(() => { ... }, []) લખો. ખાલી ડિપેન્ડન્સી એરે React ને જણાવે છે કે આ ઇફેક્ટની કોઈ બાહ્ય ડિપેન્ડન્સી નથી, તેથી તે પ્રારંભિક રેન્ડર પછી જ ચાલે છે. આ componentDidMount નું સ્થાન લે છે.

અપડેટ્સ હેન્ડલ કરવા માટે, તે ચોક્કસ વેલ્યુઝ શામેલ કરો જે React એ જોવી જોઈએ: useEffect(() => { ... }, [dependency]). જ્યારે રેન્ડર્સ વચ્ચે dependency બદલાય છે,