જો તમે રિએક્ટ ડેવલપર છો કે જેમણે હજી સુધી રિએક્ટ હુક્સ વિશે જાણ્યું નથી, તો હવે આ ક્ષણ છે. આ પોસ્ટ ઇફેક્ટ રિએક્ટ હૂકનો વિગતવાર ઉપયોગ કરશે. તે સ્વિસ આર્મી છરીની સમકક્ષ હૂક છે. તે વિવિધ સમસ્યાઓનું નિરાકરણ કરે છે, જેમ કે જ્યારે કોઈ ઘટક માઉન્ટ થાય ત્યારે ડેટા કેવી રીતે મેળવવો, જ્યારે સ્થિતિ અથવા પ્રોપ બદલાય ત્યારે કોડ કેવી રીતે ચલાવવો, ટાઈમર અથવા અંતરાલો કેવી રીતે સેટ કરવા વગેરે.
જેએસએક્સ (કોઈપણ પ્રકારની આડ અસર) પરત ન કરતા હોય તેવા પ્રતિક્રિયા ઘટકમાં તમે જે કંઈપણ "કરવા" માંગો છો તેના માટે useEffect નો ઉપયોગ થાય છે. તમારી પાસે ઘટક દીઠ અનેક ઉપયોગની અસરો પણ હોઈ શકે છે.
આ બધી શક્તિ ખર્ચે આવે છે: જ્યાં સુધી તમે સમજો છો કે તે કેવી રીતે કાર્ય કરે છે, તે મૂંઝવણભર્યું હોઈ શકે છે. આ પોસ્ટમાં, અમે વિવિધ ઉદાહરણો જોઈશું જેથી કરીને તમે વૈચારિક મોડેલને સમજી શકો અને તેને તમારા પોતાના કોડ પર લાગુ કરી શકો.
પ્રતિક્રિયા હુક્સ - તે શું હલ કરવાનો પ્રયાસ કરી રહ્યો છે?
હુક્સને સૌપ્રથમ રિએક્ટ વર્ઝન 16.8માં રજૂ કરવામાં આવ્યા હતા અને હવે ઘણા રિએક્ટ પ્રોજેક્ટ્સ દ્વારા તેનો ઉપયોગ કરવામાં આવે છે. હુક્સ ઘટકો વચ્ચે કોડના પુનરાવર્તનની સમસ્યાને દૂર કરે છે. તેઓ વર્ગોના ઉપયોગ વિના લખવામાં આવે છે. આનો અર્થ એ નથી કે પ્રતિક્રિયા વર્ગો છોડી રહી છે; હુક્સ ફક્ત એક વૈકલ્પિક પદ્ધતિ છે.
પ્રતિક્રિયા તમને સ્ટેટફુલ તર્ક સાથે ઝડપથી અત્યાધુનિક ઘટકો બનાવવાની મંજૂરી આપે છે. આ ઘટકોને અલગ પાડવું મુશ્કેલ છે કારણ કે વર્ગ પ્રતિક્રિયા જીવનચક્ર પદ્ધતિઓ પર આધાર રાખે છે. આ તે છે જ્યાં પ્રતિક્રિયા હુક્સ આવે છે.
તેઓ તમને એક ઘટકને નાના કાર્યોમાં વિભાજીત કરવાની મંજૂરી આપે છે. લાઇફસાઇકલ પદ્ધતિઓના આધારે કોડને નાના ટુકડાઓમાં વિભાજીત કરવાને બદલે, તમે હવે કાર્યક્ષમતાના આધારે કોડને નાના એકમોમાં ગોઠવી અને અલગ કરી શકો છો.
ઇફેક્ટ હૂકનો ઉપયોગ શું છે?
હુક્સ એવા કાર્યો છે જે તમને ES6 વર્ગો લખ્યા વિના રાજ્ય અને અન્ય પ્રતિક્રિયા ક્ષમતાઓને ઍક્સેસ કરવાની મંજૂરી આપે છે. રિએક્ટ હુક્સ API પાસે useEffect નામનો હૂક છે. જો તમે પ્રતિક્રિયા જીવન ચક્રથી પરિચિત છો, તો ઇફેક્ટ હૂકનો ઉપયોગ componentDidMount, componentDidUpdate, અને ઘટકવિલઅનમાઉન્ટ જીવન ચક્ર પદ્ધતિઓ સંયુક્ત.
React Hooks દસ્તાવેજીકરણ અનુસાર, તે ES6 વર્ગના ઘટક જીવન ચક્ર પદ્ધતિઓ સાથેના કેટલાક મુદ્દાઓને ઉકેલવા માટે બનાવવામાં આવ્યું હતું.
સિન્ટેક્ષ
પ્રથમ દલીલ એ કૉલબેક ફંક્શન છે, જે દરેક રેન્ડર પછી મૂળભૂત રીતે ચલાવવામાં આવે છે. બીજું પરિમાણ એ વૈકલ્પિક નિર્ભરતા એરે છે જે હૂકને માત્ર ત્યારે જ કોલબેક કરવા માટે સૂચના આપે છે જો લક્ષ્ય સ્થિતિ બદલાય.
હૂક દરેક નિર્ભરતાના ઐતિહાસિક અને વર્તમાન રાજ્યોની તુલના કરે છે. જો બે મૂલ્યો મેળ ખાતા નથી, તો હૂક પ્રથમ પરિમાણમાં ઉલ્લેખિત કૉલબેકને બોલાવે છે. ડિપેન્ડન્સી એરે સામાન્ય કૉલબેક વર્તણૂકને બદલે છે અને ખાતરી આપે છે કે હૂક ઘટક અવકાશમાં અન્ય તમામ ઘટકોની અવગણના કરે છે.
મૂળભૂત ઉપયોગ
સંદેશ સાચવવા માટે, હું ઉપરના કોડ નમૂનામાં React useState નો ઉપયોગ કરું છું. તે પછી, હું મારો મેસેજ સ્ટેટ વેરીએબલ લઉં છું અને તેને સ્ક્રીન પર પ્રિન્ટ કરું છું. જો કે, હવે હું કમ્પોનન્ટ માઉન્ટ થયા પછી એક સેકન્ડમાં મેસેજને સંશોધિત કરવા ઇફેક્ટનો ઉપયોગ કરવા માંગુ છું.
મેં React ફ્રેમવર્કમાંથી useEffect આયાત કર્યા પછી UseState લાઇનની પાછળ મારી અસર દાખલ કરી છે. ઇફેક્ટનો ઉપયોગ કરવા માટેનું પ્રથમ પરિમાણ એક કાર્ય છે. જ્યારે આ ફંક્શન હેન્ડલર એક્ઝિક્યુટ થાય છે, ત્યારે તે તમે પ્રદાન કરો છો તે કોઈપણ આડઅસરોની કાળજી લેશે. ફંક્શન એ કૉલબૅક ફંક્શન છે જેને જ્યારે રિએક્ટ કમ્પોનન્ટ લાઇફસાઇકલ ઇવેન્ટમાંથી કોઈ એક થાય ત્યારે કહેવામાં આવે છે.
તેનો ઉપયોગ ક્યારે કરવો?
UseEffect હૂક વિવિધ પરિસ્થિતિઓમાં ઉપયોગી થઈ શકે છે. નીચેના સૌથી નિર્ણાયક છે:
- જ્યારે અમે સપ્લાય કરેલી દલીલના આધારે ડેટા મેળવવા ઈચ્છીએ છીએ ત્યારે અમે ક્લાયન્ટ તરફથી આ પરિમાણ બદલી શકીએ છીએ. પેરામીટરને તાજા ડેટા સાથે અપડેટ કર્યા પછી તેને પરત બોલાવવામાં આવશે.
- જો આપણે API એન્ડપોઇન્ટમાંથી ડેટા પુનઃપ્રાપ્ત કરવા માંગીએ છીએ અને તેને ક્લાયંટ-સાઇડ પર પ્રદર્શિત કરીએ છીએ. જ્યારે અમારું ઘટક રેન્ડર થાય છે, ત્યારે UseEffect હૂકને આપેલ ફંક્શન અથવા હેન્ડલર એક્ઝિક્યુટ થાય છે અને ઘટક સ્ટેટ્સમાંનો ડેટા પુનઃપ્રાપ્ત થાય છે. આ સ્થિતિઓ પછી વપરાશકર્તા ઇન્ટરફેસ ઘટકોમાં કાર્યરત થાય છે.
- જ્યારે તમારું ઘટક બહારની દુનિયાના ડેટા પર આધાર રાખે છે અને અમે ખાતરી કરી શકતા નથી કે ડેટા આવશે, ત્યારે અમારે ઇફેક્ટનો ઉપયોગ કરવો જોઈએ (કદાચ સર્વર ડાઉન છે). સમસ્યાઓ ફેંકવા અને અન્ય ઘટકોને પ્રદર્શિત થવાથી અટકાવવાને બદલે, તેમને useEffect હૂકમાં મૂકો.
કેસનો ઉપયોગ કરો
જો ઘટક પ્રથમ રન પછી ફરીથી રેન્ડર થાય છે, તો તે એક્ઝિક્યુટ થશે નહીં.
જ્યારે પણ કોઈ ઘટક રેન્ડર કરે છે અથવા ફરીથી રેન્ડર કરે છે, ત્યારે તે હંમેશા એક્ઝિક્યુટ થવું જોઈએ.
મૂળભૂત રીતે, પ્રોગ્રામ ફક્ત એક જ વાર ચાલે છે. પછીથી, જો પ્રોપ મૂલ્યો બદલાય છે, તો ચલાવો:
અસુમેળ પ્રવૃત્તિઓ માટે, હંમેશા useEffect નો ઉપયોગ કરો.
તમારા સાથી વિકાસકર્તાઓ માટે ઇફેક્ટ કોડ બ્લોક્સ એ સિંક્રનસ જોબ્સના સ્પષ્ટ માર્કર છે. UseEffect નો ઉપયોગ કર્યા વિના અસુમેળ કોડ બનાવવાનું શક્ય છે, પરંતુ આ "પ્રતિક્રિયા પદ્ધતિ" નથી અને તે જટિલતા અને ભૂલોનું જોખમ બંને વધારે છે.
અસુમેળ કોડ લખવાને બદલે useEffect નો ઉપયોગ કરવો જે UI ને બંધ કરી શકે છે તે પ્રતિક્રિયા સમુદાયમાં જાણીતી તકનીક છે, ખાસ કરીને જે રીતે પ્રતિક્રિયા ટીમે તેને આડઅસર કરવા માટે બનાવી છે.
તેનો ઉપયોગ કરવાનો બીજો ફાયદો એ છે કે વિકાસકર્તાઓ ફક્ત કોડની સમીક્ષા કરી શકે છે અને "નિયંત્રણ પ્રવાહની બહાર" ચલાવવામાં આવેલ કોડને તરત જ શોધી શકે છે, જે પ્રથમ રેન્ડર ચક્ર પછી જ મહત્વપૂર્ણ બને છે. વધુમાં, બ્લોક્સ ફરીથી વાપરી શકાય તેવા અને વધુ સિમેન્ટીક કસ્ટમ હુક્સમાં નિષ્કર્ષણ માટે યોગ્ય છે.
એક ઉદાહરણ
યુઝ ઇફેક્ટ કોડનો ઉપયોગ કરીને, સેકન્ડ દીઠ સંખ્યા વધારો.
ઉપસંહાર
મારા મતે, જો તમે નેક્સ્ટ-લેવલ રિએક્ટ ડેવલપર બનવા માંગતા હોવ તો તે શીખવા માટે ઇફેક્ટ હૂકના ઉપયોગના અંતર્ગત ડિઝાઇન સિદ્ધાંતો અને શ્રેષ્ઠ પ્રયાસોને સમજવું એ એક મહત્વપૂર્ણ કૌશલ્ય છે.
સારાંશ માટે, ઉપયોગ ઇફેક્ટ હૂક એક કાર્ય મેળવે છે જેમાં આવશ્યક, સંભવિત અસર પૂર્ણ તર્કનો સમાવેશ થાય છે. અવલંબન એરે, જે બીજું પરિમાણ છે, તેનો ઉપયોગ અમલને પ્રભાવિત કરવા માટે થઈ શકે છે. તેની સાથે કામ કરતી વખતે, રીટર્ન ફંક્શનનો ઉપયોગ કરીને સફાઈ કોડ લખવો પણ જરૂરી છે.
જો લેખ મદદરૂપ હતો તો અમને ટિપ્પણીઓમાં જણાવો.
એક જવાબ છોડો