React ઈચ્છે છે કે તમારા components અનુમાનિત (predictable) હોય. તેને સમાન state અને props આપો, અને તેણે દર વખતે સમાન UI બતાવવું જોઈએ.

React ઈચ્છે છે કે તમારા components અનુમાનિત (predictable) હોય. તેને સમાન state અને props આપો, અને તેણે દર વખતે સમાન UI બતાવવું જોઈએ. પરંતુ મોટાભાગની વાસ્તવિક એપ્લિકેશન્સ તે બબલની અંદર ટકી શકતી નથી. તેમને બહાર પહોંચવાની જરૂર હોય છે. એક ડેશબોર્ડને સર્વર પરથી તાજા આંકડાઓની જરૂર હોય છે. ચેટ વિજેટને મેસેજ સાંભળવાની જરૂર હોય છે. ટાઈમરને ટિક કરવાની જરૂર હોય છે. આ કામગીરી side effects છે, અને તે React ના render cycle ની બહાર હોય છે. useEffect hook એ જગ્યા છે જ્યાં તમે આ અસ્તવ્યસ્ત, અનિશ્ચિત કામ મૂકો છો જેથી તમારું component પોતે પ્રમાણિક રહે.

Side Effects: useEffect ની અંદર શું હોવું જોઈએ

Side effect એ JSX રિટર્ન કરવા સિવાય દુનિયાના કોઈપણ ભાગને સ્પર્શતું હોય તે છે. React નો render phase શુદ્ધ (pure) હોવો જોઈએ. જ્યારે તમે ડેટા ફેચ કરવાનું, global variables માં લખવાનું, અથવા DOM ને listeners સાથે જોડવાનું શરૂ કરો છો, ત્યારે તમે pure territory ની બહાર નીકળી ગયા છો.

સામાન્ય ઉદાહરણોમાં શામેલ છે:

• API માંથી ડેટા ફેચ કરવો
• timers અથવા intervals સેટ કરવા
• window અથવા document માં event listeners ઉમેરવા
• બ્રાઉઝર ટેબ ટાઈટલ અપડેટ કરવું
• WebSockets સાથે કનેક્ટ કરવું

આ કાર્યોમાં એક સમાન લક્ષણ છે: તેઓ તમારા component ના return statement માં અથવા મુખ્ય render logic દરમિયાન હોવા જોઈએ નહીં. render body ની અંદર સીધું setInterval જેવું browser API કોલ કરવાનો પ્રયાસ કરવાથી તે દરેક render પર ચાલશે, જેનાથી ડુપ્લીકેટ timers અને મૂંઝવણભર્યું વર્તન ઊભું થશે. useEffect બરાબર આ કામને અલગ પાડવા અને તેને યોગ્ય સમયે ચલાવવા માટે અસ્તિત્વ ધરાવે છે.

Dependency Array કેવી રીતે Timing ને નિયંત્રિત કરે છે

useEffect માટેનો બીજો argument dependency array છે, અને class components માંથી આવતા ડેવલપર્સ માટે તે મૂંઝવણનું સૌથી મોટું કારણ છે. તેને એવા વેરિએબલ્સના સેટ તરીકે વિચારો જેના પર React નજર રાખે છે જેથી તે નક્કી કરી શકે કે વર્તમાન render પછી તમારા effect ને સ્કીપ કરવું કે ચલાવવું.

તમે વારંવાર ઉપયોગમાં લેવાપાત્ર ત્રણ પેટર્ન જોશો.

કોઈપણ dependency array નહીં. જો તમે array ને સંપૂર્ણપણે છોડી દો છો, તો React માની લે છે કે તમે ઈચ્છો છો કે પ્રથમ render સહિત દરેક single render પછી effect ચાલે. આ ભાગ્યે જ તમારી જરૂરિયાત હોય છે. જો તમારું effect નેટવર્ક રિક્વેસ્ટ અથવા ભારે DOM ઓપરેશન કરે છે, તો દરેક keystroke અથવા state ફેરફાર પર તેને ચલાવવાથી performance ઘટી જશે. આ pattern નો ઉપયોગ ત્યારે જ કરો જ્યારે તમને ખરેખર કંઈક ફરીથી ચલાવવાની જરૂર હોય કારણ કે કોઈપણ prop અથવા state બદલાઈ શકે છે અને તમે તેમાંથી કયા બદલાયા છે તે ચોક્કસ રીતે જણાવી શકતા નથી.

ખાલી array []. આ React ને component mount થયા પછી અને DOM તૈયાર થયા પછી તરત જ એક જ વાર effect ચલાવવા માટે કહે છે. આ પ્રારંભિક ડેટા ફેચ કરવા માટે યોગ્ય જગ્યા છે. ઉદાહરણ તરીકે, જો તમારું component user profile ડેટા લોડ કરે છે, તો તમે ઈચ્છો છો કે તે રિક્વેસ્ટ પ્રોફાઇલ પેજ દેખાય ત્યારે બરાબર એક જ વાર થાય, પેજ પર નીચેના ફોર્મ સાથે યુઝર જ્યારે પણ ઇન્ટરેક્ટ કરે ત્યારે નહીં.

ચોક્કસ વેરિએબલ્સ સાથેનો array [count]. આ એક ચોકસાઈનું સાધન છે. React આ dependencies ની વર્તમાન કિંમતોની સરખામણી છેલ્લા render દરમિયાનની તેમની કિંમતો સાથે કરે છે. જો તેમાંથી કોઈ પણ બદલાયું હોય, તો effect ચાલે છે. જો લિસ્ટમાં કંઈ પણ બદલાયું ન હોય, તો React effect ને સંપૂર્ણપણે સ્કીપ કરે છે.

જો તમે બ્રાઉઝર ટેબ ટાઈટલને state variable સાથે સિંક કરી રહ્યા હોવ, તો તમારે તે વેરિએબલને dependency array માં મૂકવો જોઈએ. React પછી ફક્ત ત્યારે જ ટાઈટલ અપડેટ કરશે જ્યારે તે કિંમત બદલાશે. જો તમે તેને બહાર રાખશો, તો ટાઈટલ જૂનું (stale) રહેશે. જો તમે અસંબંધિત state variables ઉમેરશો, તો તમે એવા ફેરફારો માટે ટાઈટલ અપડેટ કરવામાં સાયકલ વેડફશો જે મહત્વના નથી.

Cleanup એ વૈકલ્પિક નથી

કેટલાક effects પાછળ નિશાન છોડી જાય છે. એક ટાઈમર ગણતરી ચાલુ રાખે છે. એક event listener ચાલુ રહે છે. એક WebSocket ખુલ્લું રહે છે. જ્યારે તમારું component unmount થાય છે, અથવા જ્યારે dependencies બદલાવાને કારણે effect ફરીથી ચાલે છે, ત્યારે React અગાઉના effect ના અવશેષોને આપમેળે સાફ કરતું નથી. તે તમારું કામ છે.

તમે useEffect ની અંદરથી એક function રિટર્ન કરીને cleanup function બનાવી શકો છો. React આ cleanup ને આગલું effect લાગુ કરતા પહેલા, અને એકવાર જ્યારે component સ્ક્રીન પરથી જાય ત્યારે કોલ કરે છે.

તમારે આના માટે cleanup નો ઉપયોગ કરવો જોઈએ:

• clearInterval અથવા clearTimeout સાથે intervals અથવા timeouts ક્લિયર કરવા
• window, document, અથવા બાહ્ય nodes માં ઉમેરેલા event listeners દૂર કરવા
• ડેટા streams અથવા services માંથી unsubscribe કરવું

આની અવગણના કરો, તો તમને memory leaks મળશે. એક component mount થાય છે, scroll listener જોડે છે, unmount થાય છે, અને listener ત્યાં જ રહે છે. બ્રાઉઝર તે callback અને તે સંદર્ભિત DOM nodes ને પકડી રાખે છે. સમય જતાં, ખાસ કરીને ભારે નેવિગેશન ધરાવતી single-page એપ્લિકેશન્સમાં, આ 'ભૂત' (ghosts) એકઠા થાય છે અને ટેબને ધીમું પાડે છે. તેનો ઉકેલ સામાન્ય રીતે માત્ર થોડી લાઈનો છે: એક એવું function રિટર્ન કરો જે તમે ઉમેર્યું હતું તેને દૂર કરે.

સામાન્ય ભૂલો જે Production માં જાય છે

જ્યારે સરળ વિકલ્પ ઉપલબ્ધ હોય ત્યારે પણ અનુભવી ડેવલપર્સ useEffect નો ઉપયોગ કરવા પ્રેરાય છે. અહીં ત્રણ એવા પેટર્ન છે જે કોડ રિવ્યુ દરમિયાન ચેતવણી (red flag) સમાન હોવા જોઈએ.

ઇન્ફિનિટ લૂપ્સ. જો તે જ વેરિએબલ તમારા dependency array માં હોય, તો useEffect ની અંદર ક્યારેય state variable ને અપડેટ કરશો નહીં, સિવાય કે તમારી પાસે કોઈ એવી gate condition હોય જે આ ચક્રને તોડી શકે. જો તમે count વાંચો, તેને increment કરો, અને count ને dependency તરીકે લિસ્ટ કરો, તો React ફેરફારને જુએ છે, re-render કરે છે, ફરીથી effect ચલાવે છે, ફરીથી increment કરે છે, અને બ્રાઉઝરને લોક કરી દે છે.

બિનજરૂરી effects. હાલના props અથવા state માંથી કોઈ value ગણવા માટે useEffect નો ઉપયોગ કરશો નહીં. જો તમે તેને render દરમિયાન સીધું જ derive કરી શકતા હોવ, તો તે જ કરો. Derived values component body માં અથવા useMemo સાથેના memoized calculation માં હોવી જોઈએ. તેમને effect માં ખસેડવાથી કોઈ ફાયદો થતો નથી, પરંતુ તે તમારા logic ને render અને effect phases માં વિભાજિત કરે છે અને કોડને સમજવામાં મુશ્કેલ બનાવે છે.

યુઝર એક્શન્સ માટે ખોટું સાધન. use