રિએક્ટ ઓટોમેટિક મેમરી મેનેજમેન્ટ: ગાર્બેજ કલેક્શન ઓપ્ટિમાઇઝેશન

રિએક્ટ, યુઝર ઇન્ટરફેસ બનાવવા માટેની જાવાસ્ક્રિપ્ટ લાઇબ્રેરી, તેના કમ્પોનન્ટ-આધારિત આર્કિટેક્ચર અને કાર્યક્ષમ અપડેટ મિકેનિઝમ્સ માટે અત્યંત લોકપ્રિય બની છે. જોકે, કોઈપણ જાવાસ્ક્રિપ્ટ-આધારિત એપ્લિકેશનની જેમ, રિએક્ટ એપ્લિકેશન્સ પણ ઓટોમેટિક મેમરી મેનેજમેન્ટના નિયંત્રણોને આધીન છે, મુખ્યત્વે ગાર્બેજ કલેક્શન દ્વારા. આ પ્રક્રિયા કેવી રીતે કાર્ય કરે છે, અને તેને કેવી રીતે ઓપ્ટિમાઇઝ કરવી તે સમજવું, તમારા સ્થાન કે પૃષ્ઠભૂમિને ધ્યાનમાં લીધા વિના, પર્ફોર્મન્ટ અને રિસ્પોન્સિવ રિએક્ટ એપ્લિકેશન્સ બનાવવા માટે નિર્ણાયક છે. આ બ્લોગ પોસ્ટનો ઉદ્દેશ્ય રિએક્ટના ઓટોમેટિક મેમરી મેનેજમેન્ટ અને ગાર્બેજ કલેક્શન ઓપ્ટિમાઇઝેશન માટે એક વ્યાપક માર્ગદર્શિકા પ્રદાન કરવાનો છે, જેમાં ફંડામેન્ટલ્સથી લઈને એડવાન્સ્ડ ટેકનિક્સ સુધીના વિવિધ પાસાઓને આવરી લેવામાં આવ્યા છે.

ઓટોમેટિક મેમરી મેનેજમેન્ટ અને ગાર્બેજ કલેક્શનને સમજવું

C અથવા C++ જેવી ભાષાઓમાં, ડેવલપર્સ મેમરીને મેન્યુઅલી ફાળવવા અને રદ કરવા માટે જવાબદાર હોય છે. આ ઝીણવટભર્યું નિયંત્રણ પૂરું પાડે છે પરંતુ મેમરી લીક્સ (વણવપરાયેલી મેમરીને મુક્ત કરવામાં નિષ્ફળતા) અને ડેંગલિંગ પોઇન્ટર્સ (મુક્ત થયેલી મેમરીને એક્સેસ કરવી) નું જોખમ પણ ઉભું કરે છે, જેનાથી એપ્લિકેશન ક્રેશ થાય છે અને પર્ફોર્મન્સ ઘટે છે. જાવાસ્ક્રિપ્ટ, અને તેથી રિએક્ટ, ઓટોમેટિક મેમરી મેનેજમેન્ટનો ઉપયોગ કરે છે, જેનો અર્થ છે કે જાવાસ્ક્રિપ્ટ એન્જિન (દા.ત., ક્રોમનું V8, ફાયરફોક્સનું સ્પાઇડરમંકી) મેમરીની ફાળવણી અને રદ કરવાની પ્રક્રિયાને આપમેળે સંભાળે છે.

આ ઓટોમેટિક પ્રક્રિયાનો મુખ્ય ભાગ ગાર્બેજ કલેક્શન (GC) છે. ગાર્બેજ કલેક્ટર સમયાંતરે એવી મેમરીને ઓળખે છે અને પુનઃપ્રાપ્ત કરે છે જે એપ્લિકેશન દ્વારા હવે પહોંચી શકાય તેવી નથી અથવા વપરાશમાં નથી. આ મેમરીને એપ્લિકેશનના અન્ય ભાગો દ્વારા ઉપયોગમાં લેવા માટે મુક્ત કરે છે. સામાન્ય પ્રક્રિયામાં નીચેના પગલાંઓનો સમાવેશ થાય છે:

• માર્કિંગ: ગાર્બેજ કલેક્ટર બધા "પહોંચી શકાય તેવા" ઓબ્જેક્ટ્સને ઓળખે છે. આ એવા ઓબ્જેક્ટ્સ છે જે ગ્લોબલ સ્કોપ, એક્ટિવ ફંક્શન્સના કોલ સ્ટેક્સ અને અન્ય એક્ટિવ ઓબ્જેક્ટ્સ દ્વારા સીધા કે આડકતરી રીતે સંદર્ભિત હોય છે.
• સ્વીપિંગ: ગાર્બેજ કલેક્ટર બધા "પહોંચી ન શકાય તેવા" ઓબ્જેક્ટ્સ (ગાર્બેજ) ને ઓળખે છે – જે હવે સંદર્ભિત નથી. પછી ગાર્બેજ કલેક્ટર તે ઓબ્જેક્ટ્સ દ્વારા રોકાયેલી મેમરીને રદ કરે છે.
• કોમ્પેક્ટિંગ (વૈકલ્પિક): ગાર્બેજ કલેક્ટર મેમરી ફ્રેગમેન્ટેશન ઘટાડવા માટે બાકી રહેલા પહોંચી શકાય તેવા ઓબ્જેક્ટ્સને કોમ્પેક્ટ કરી શકે છે.

વિવિધ ગાર્બેજ કલેક્શન એલ્ગોરિધમ્સ અસ્તિત્વમાં છે, જેમ કે માર્ક-એન્ડ-સ્વીપ એલ્ગોરિધમ, જનરેશનલ ગાર્બેજ કલેક્શન, અને અન્ય. જાવાસ્ક્રિપ્ટ એન્જિન દ્વારા ઉપયોગમાં લેવાતું વિશિષ્ટ એલ્ગોરિધમ એક અમલીકરણ વિગત છે, પરંતુ વણવપરાયેલી મેમરીને ઓળખવા અને પુનઃપ્રાપ્ત કરવાનો સામાન્ય સિદ્ધાંત એ જ રહે છે.

જાવાસ્ક્રિપ્ટ એન્જિન્સની ભૂમિકા (V8, સ્પાઇડરમંકી)

રિએક્ટ સીધું ગાર્બેજ કલેક્શનને નિયંત્રિત કરતું નથી; તે વપરાશકર્તાના બ્રાઉઝર અથવા Node.js એન્વાયર્નમેન્ટમાં રહેલા અંતર્ગત જાવાસ્ક્રિપ્ટ એન્જિન પર આધાર રાખે છે. સૌથી સામાન્ય જાવાસ્ક્રિપ્ટ એન્જિનમાં શામેલ છે:

• V8 (ક્રોમ, એજ, Node.js): V8 તેના પર્ફોર્મન્સ અને એડવાન્સ્ડ ગાર્બેજ કલેક્શન ટેકનિક્સ માટે જાણીતું છે. તે જનરેશનલ ગાર્બેજ કલેક્ટરનો ઉપયોગ કરે છે જે હીપને બે મુખ્ય જનરેશનમાં વિભાજિત કરે છે: યંગ જનરેશન (જ્યાં ટૂંકા ગાળાના ઓબ્જેક્ટ્સ વારંવાર એકત્રિત કરવામાં આવે છે) અને ઓલ્ડ જનરેશન (જ્યાં લાંબા ગાળાના ઓબ્જેક્ટ્સ રહે છે).
• સ્પાઇડરમંકી (ફાયરફોક્સ): સ્પાઇડરમંકી એ બીજું હાઇ-પર્ફોર્મન્સ એન્જિન છે જે જનરેશનલ ગાર્બેજ કલેક્ટર સાથે સમાન અભિગમનો ઉપયોગ કરે છે.
• જાવાસ્ક્રિપ્ટકોર (સફારી): સફારી અને ઘણીવાર iOS ઉપકરણોમાં વપરાય છે, જાવાસ્ક્રિપ્ટકોરની પોતાની ઓપ્ટિમાઇઝ્ડ ગાર્બેજ કલેક્શન વ્યૂહરચનાઓ છે.

જાવાસ્ક્રિપ્ટ એન્જિનની પર્ફોર્મન્સ લાક્ષણિકતાઓ, જેમાં ગાર્બેજ કલેક્શન પોઝનો સમાવેશ થાય છે, રિએક્ટ એપ્લિકેશનના રિસ્પોન્સિવનેસ પર નોંધપાત્ર અસર કરી શકે છે. આ પોઝનો સમયગાળો અને આવર્તન નિર્ણાયક છે. રિએક્ટ કમ્પોનન્ટ્સને ઓપ્ટિમાઇઝ કરવા અને મેમરી વપરાશને ઘટાડવાથી ગાર્બેજ કલેક્ટર પરનો ભાર ઓછો કરવામાં મદદ મળે છે, જેનાથી યુઝરનો અનુભવ સરળ બને છે.

રિએક્ટ એપ્લિકેશન્સમાં મેમરી લીક્સના સામાન્ય કારણો

જ્યારે જાવાસ્ક્રિપ્ટનું ઓટોમેટિક મેમરી મેનેજમેન્ટ ડેવલપમેન્ટને સરળ બનાવે છે, તેમ છતાં રિએક્ટ એપ્લિકેશન્સમાં મેમરી લીક્સ થઈ શકે છે. મેમરી લીક્સ ત્યારે થાય છે જ્યારે ઓબ્જેક્ટ્સની હવે જરૂર નથી હોતી પરંતુ તે ગાર્બેજ કલેક્ટર દ્વારા પહોંચી શકાય તેવા રહે છે, જેનાથી તેમની ડીએલોકેશન અટકે છે. અહીં મેમરી લીક્સના સામાન્ય કારણો છે:

• ઇવેન્ટ લિસનર્સ અનમાઉન્ટ ન કરવા: કમ્પોનન્ટની અંદર ઇવેન્ટ લિસનર્સ (દા.ત., `window.addEventListener`) જોડવા અને કમ્પોનન્ટ અનમાઉન્ટ થાય ત્યારે તેને દૂર ન કરવા એ લીક્સનો વારંવારનો સ્ત્રોત છે. જો ઇવેન્ટ લિસનર પાસે કમ્પોનન્ટ અથવા તેના ડેટાનો સંદર્ભ હોય, તો કમ્પોનન્ટ ગાર્બેજ કલેક્ટ કરી શકાતો નથી.
• ટાઇમર્સ અને ઇન્ટરવલ્સ સાફ ન કરવા: ઇવેન્ટ લિસનર્સની જેમ, `setTimeout`, `setInterval`, અથવા `requestAnimationFrame` નો ઉપયોગ કરીને જ્યારે કમ્પોનન્ટ અનમાઉન્ટ થાય ત્યારે તેને સાફ ન કરવાથી મેમરી લીક્સ થઈ શકે છે. આ ટાઇમર્સ કમ્પોનન્ટના સંદર્ભોને પકડી રાખે છે, જેનાથી તેનું ગાર્બેજ કલેક્શન અટકે છે.
• ક્લોઝર્સ: ક્લોઝર્સ તેમના લેક્સિકલ સ્કોપમાં વેરિયેબલ્સના સંદર્ભોને જાળવી શકે છે, ભલેને બાહ્ય ફંક્શનનું એક્ઝેક્યુશન પૂરું થઈ ગયું હોય. જો કોઈ ક્લોઝર કમ્પોનન્ટના ડેટાને કેપ્ચર કરે છે, તો કમ્પોનન્ટ ગાર્બેજ કલેક્ટ ન થઈ શકે.
• વર્તુળાકાર સંદર્ભો: જો બે ઓબ્જેક્ટ્સ એકબીજાના સંદર્ભો ધરાવે છે, તો એક વર્તુળાકાર સંદર્ભ બને છે. ભલેને બંને ઓબ્જેક્ટ્સ સીધા બીજે ક્યાંય સંદર્ભિત ન હોય, ગાર્બેજ કલેક્ટરને તે નક્કી કરવામાં મુશ્કેલી પડી શકે છે કે તે ગાર્બેજ છે કે નહીં અને તે તેમને પકડી રાખી શકે છે.
• મોટા ડેટા સ્ટ્રક્ચર્સ: કમ્પોનન્ટ સ્ટેટ અથવા પ્રોપ્સમાં અત્યંત મોટા ડેટા સ્ટ્રક્ચર્સ સંગ્રહ કરવાથી મેમરીની ખામી સર્જાઈ શકે છે.
• `useMemo` અને `useCallback` નો દુરુપયોગ: જોકે આ હુક્સ ઓપ્ટિમાઇઝેશન માટે બનાવાયેલ છે, તેમનો ખોટો ઉપયોગ બિનજરૂરી ઓબ્જેક્ટ બનાવટ તરફ દોરી શકે છે અથવા ઓબ્જેક્ટ્સને ગાર્બેજ કલેક્ટ થતા અટકાવી શકે છે જો તેઓ અવલંબનને ખોટી રીતે કેપ્ચર કરે.
• અયોગ્ય DOM મેનીપ્યુલેશન: રિએક્ટ કમ્પોનન્ટની અંદર મેન્યુઅલી DOM એલિમેન્ટ્સ બનાવવા અથવા DOM ને સીધું સંશોધિત કરવાથી મેમરી લીક્સ થઈ શકે છે જો તેને કાળજીપૂર્વક હેન્ડલ ન કરવામાં આવે, ખાસ કરીને જો એવા એલિમેન્ટ્સ બનાવવામાં આવે જે સાફ ન થાય.

આ મુદ્દાઓ તમારા પ્રદેશને ધ્યાનમાં લીધા વિના સુસંગત છે. મેમરી લીક્સ વૈશ્વિક સ્તરે વપરાશકર્તાઓને અસર કરી શકે છે, જેનાથી પર્ફોર્મન્સ ધીમું થાય છે અને વપરાશકર્તાનો અનુભવ બગડે છે. આ સંભવિત સમસ્યાઓને દૂર કરવાથી દરેક માટે વધુ સારા વપરાશકર્તા અનુભવમાં ફાળો મળે છે.

મેમરી લીક ડિટેક્શન અને ઓપ્ટિમાઇઝેશન માટેના સાધનો અને તકનીકો

સદભાગ્યે, કેટલાક સાધનો અને તકનીકો તમને રિએક્ટ એપ્લિકેશન્સમાં મેમરી લીક્સને શોધવા અને સુધારવામાં તેમજ મેમરી વપરાશને ઓપ્ટિમાઇઝ કરવામાં મદદ કરી શકે છે:

• બ્રાઉઝર ડેવલપર ટૂલ્સ: ક્રોમ, ફાયરફોક્સ અને અન્ય બ્રાઉઝર્સમાં બિલ્ટ-ઇન ડેવલપર ટૂલ્સ અમૂલ્ય છે. તેઓ મેમરી પ્રોફાઇલિંગ ટૂલ્સ ઓફર કરે છે જે તમને આની મંજૂરી આપે છે:
  • હીપ સ્નેપશોટ લો: ચોક્કસ સમયે જાવાસ્ક્રિપ્ટ હીપની સ્થિતિને કેપ્ચર કરો. જે ઓબ્જેક્ટ્સ એકઠા થઈ રહ્યા છે તેને ઓળખવા માટે હીપ સ્નેપશોટની તુલના કરો.
  • ટાઇમલાઇન પ્રોફાઇલ્સ રેકોર્ડ કરો: સમય જતાં મેમરી ફાળવણી અને રદ કરવાની પ્રક્રિયાને ટ્રેક કરો. મેમરી લીક્સ અને પર્ફોર્મન્સ બોટલનેક્સને ઓળખો.
  • મેમરી વપરાશનું નિરીક્ષણ કરો: પેટર્ન અને સુધારણા માટેના ક્ષેત્રોને ઓળખવા માટે સમય જતાં એપ્લિકેશનના મેમરી વપરાશને ટ્રેક કરો.

  આ પ્રક્રિયામાં સામાન્ય રીતે ડેવલપર ટૂલ્સ ખોલવા (સામાન્ય રીતે રાઇટ-ક્લિક કરીને અને "Inspect" પસંદ કરીને અથવા F12 જેવા કીબોર્ડ શોર્ટકટનો ઉપયોગ કરીને), "Memory" અથવા "Performance" ટેબ પર નેવિગેટ કરવું, અને સ્નેપશોટ અથવા રેકોર્ડિંગ લેવાનો સમાવેશ થાય છે. પછી આ ટૂલ્સ તમને ચોક્કસ ઓબ્જેક્ટ્સ અને તે કેવી રીતે સંદર્ભિત થઈ રહ્યા છે તે જોવા માટે ડ્રિલ ડાઉન કરવાની મંજૂરી આપે છે.

• રિએક્ટ ડેવટૂલ્સ: રિએક્ટ ડેવટૂલ્સ બ્રાઉઝર એક્સ્ટેંશન કમ્પોનન્ટ ટ્રી વિશે મૂલ્યવાન આંતરદૃષ્ટિ પ્રદાન કરે છે, જેમાં કમ્પોનન્ટ્સ કેવી રીતે રેન્ડર થઈ રહ્યા છે અને તેમના પ્રોપ્સ અને સ્ટેટનો સમાવેશ થાય છે. જોકે સીધું મેમરી પ્રોફાઇલિંગ માટે નથી, તે કમ્પોનન્ટ સંબંધોને સમજવા માટે મદદરૂપ છે, જે મેમરી-સંબંધિત સમસ્યાઓને ડિબગ કરવામાં મદદ કરી શકે છે.
• મેમરી પ્રોફાઇલિંગ લાઇબ્રેરીઓ અને પેકેજો: કેટલીક લાઇબ્રેરીઓ અને પેકેજો મેમરી લીક ડિટેક્શનને ઓટોમેટ કરવામાં અથવા વધુ એડવાન્સ્ડ પ્રોફાઇલિંગ સુવિધાઓ પ્રદાન કરવામાં મદદ કરી શકે છે. ઉદાહરણોમાં શામેલ છે:
  • `why-did-you-render`: આ લાઇબ્રેરી રિએક્ટ કમ્પોનન્ટ્સના બિનજરૂરી રી-રેન્ડર્સને ઓળખવામાં મદદ કરે છે, જે પર્ફોર્મન્સને અસર કરી શકે છે અને સંભવિત રૂપે મેમરી સમસ્યાઓને વધારી શકે છે.
  • `react-perf-tool`: રેન્ડરિંગ સમય અને કમ્પોનન્ટ અપડેટ્સ સંબંધિત પર્ફોર્મન્સ મેટ્રિક્સ અને વિશ્લેષણ ઓફર કરે છે.
  • `memory-leak-finder` અથવા સમાન સાધનો: કેટલીક લાઇબ્રેરીઓ ખાસ કરીને ઓબ્જેક્ટ સંદર્ભોને ટ્રેક કરીને અને સંભવિત લીક્સને શોધીને મેમરી લીક ડિટેક્શનને સંબોધિત કરે છે.
• કોડ રિવ્યુ અને શ્રેષ્ઠ પ્રથાઓ: કોડ રિવ્યુ નિર્ણાયક છે. નિયમિતપણે કોડની સમીક્ષા કરવાથી મેમરી લીક્સ પકડી શકાય છે અને કોડની ગુણવત્તા સુધારી શકાય છે. આ શ્રેષ્ઠ પ્રથાઓને સતત લાગુ કરો:
• ઇવેન્ટ લિસનર્સ અનમાઉન્ટ કરો: જ્યારે કોઈ કમ્પોનન્ટ `useEffect` માં અનમાઉન્ટ થાય, ત્યારે કમ્પોનન્ટ માઉન્ટિંગ દરમિયાન ઉમેરાયેલ ઇવેન્ટ લિસનર્સને દૂર કરવા માટે ક્લીનઅપ ફંક્શન રિટર્ન કરો. ઉદાહરણ:

              
      useEffect(() => {
          const handleResize = () => { /* ... */ };
          window.addEventListener('resize', handleResize);
          return () => {
              window.removeEventListener('resize', handleResize);
          };
      }, []);
      
              
  
                
                  Copy
                
              
            

• ટાઇમર્સ સાફ કરો: `clearInterval` અથવા `clearTimeout` નો ઉપયોગ કરીને ટાઇમર્સ સાફ કરવા માટે `useEffect` માં ક્લીનઅપ ફંક્શનનો ઉપયોગ કરો. ઉદાહરણ:

              
      useEffect(() => {
          const timerId = setInterval(() => { /* ... */ }, 1000);
          return () => {
              clearInterval(timerId);
          };
      }, []);
      
              
  
                
                  Copy
                
              
            

• બિનજરૂરી અવલંબન સાથે ક્લોઝર્સ ટાળો: ક્લોઝર્સ દ્વારા કયા વેરિયેબલ્સ કેપ્ચર કરવામાં આવે છે તેના વિશે સાવચેત રહો. મોટા ઓબ્જેક્ટ્સ અથવા બિનજરૂરી વેરિયેબલ્સને કેપ્ચર કરવાનું ટાળો, ખાસ કરીને ઇવેન્ટ હેન્ડલર્સમાં.
• `useMemo` અને `useCallback` નો વ્યૂહાત્મક રીતે ઉપયોગ કરો: મોંઘી ગણતરીઓ અથવા ફંક્શન વ્યાખ્યાઓને મેમોઇઝ કરવા માટે આ હુક્સનો ઉપયોગ કરો જે ચાઇલ્ડ કમ્પોનન્ટ્સ માટે અવલંબન છે, ફક્ત જ્યારે જરૂરી હોય ત્યારે જ, અને તેમના અવલંબન પર કાળજીપૂર્વક ધ્યાન આપીને. તેઓ ખરેખર ક્યારે ફાયદાકારક છે તે સમજીને અકાળ ઓપ્ટિમાઇઝેશન ટાળો.
• ડેટા સ્ટ્રક્ચર્સને ઓપ્ટિમાઇઝ કરો: હેતુપૂર્વકના ઓપરેશન્સ માટે કાર્યક્ષમ હોય તેવા ડેટા સ્ટ્રક્ચર્સનો ઉપયોગ કરો. અણધાર્યા મ્યુટેશન્સને રોકવા માટે અપરિવર્તનશીલ ડેટા સ્ટ્રક્ચર્સનો ઉપયોગ કરવાનું વિચારો.
• સ્ટેટ અને પ્રોપ્સમાં મોટા ઓબ્જેક્ટ્સને ઘટાડો: કમ્પોનન્ટ સ્ટેટ અને પ્રોપ્સમાં ફક્ત જરૂરી ડેટા સંગ્રહિત કરો. જો કોઈ કમ્પોનન્ટને મોટો ડેટાસેટ પ્રદર્શિત કરવાની જરૂર હોય, તો પેજિનેશન અથવા વર્ચ્યુઅલાઇઝેશન તકનીકોનો વિચાર કરો, જે એક સમયે ફક્ત દૃશ્યમાન ડેટાનો સબસેટ લોડ કરે છે.
• પર્ફોર્મન્સ ટેસ્ટિંગ: નિયમિતપણે પર્ફોર્મન્સ ટેસ્ટિંગ કરો, આદર્શ રીતે ઓટોમેટેડ ટૂલ્સ સાથે, મેમરી વપરાશનું નિરીક્ષણ કરવા અને કોડ ફેરફારો પછી કોઈપણ પર્ફોર્મન્સ રિગ્રેશનને ઓળખવા માટે.

રિએક્ટ કમ્પોનન્ટ્સ માટે વિશિષ્ટ ઓપ્ટિમાઇઝેશન તકનીકો

મેમરી લીક્સને રોકવા ઉપરાંત, કેટલીક તકનીકો તમારા રિએક્ટ કમ્પોનન્ટ્સમાં મેમરી કાર્યક્ષમતામાં સુધારો કરી શકે છે અને ગાર્બેજ કલેક્શનના દબાણને ઘટાડી શકે છે:

• કમ્પોનન્ટ મેમોઇઝેશન: ફંક્શનલ કમ્પોનન્ટ્સને મેમોઇઝ કરવા માટે `React.memo` નો ઉપયોગ કરો. જો કમ્પોનન્ટના પ્રોપ્સ બદલાયા ન હોય તો આ રી-રેન્ડર્સને અટકાવે છે. આ બિનજરૂરી કમ્પોનન્ટ રી-રેન્ડર્સ અને સંબંધિત મેમરી ફાળવણીને નોંધપાત્ર રીતે ઘટાડે છે.

              
    const MyComponent = React.memo(function MyComponent(props) { /* ... */ });
    
              
  
                
                  Copy
                
              
            

• `useCallback` સાથે ફંક્શન પ્રોપ્સને મેમોઇઝ કરવું: ચાઇલ્ડ કમ્પોનન્ટ્સને પસાર કરાયેલ ફંક્શન પ્રોપ્સને મેમોઇઝ કરવા માટે `useCallback` નો ઉપયોગ કરો. આ સુનિશ્ચિત કરે છે કે ચાઇલ્ડ કમ્પોનન્ટ્સ ફક્ત ત્યારે જ રી-રેન્ડર થાય છે જ્યારે ફંક્શનના અવલંબન બદલાય છે.

              
    const handleClick = useCallback(() => { /* ... */ }, [dependency1, dependency2]);
    
              
  
                
                  Copy
                
              
            

• `useMemo` સાથે વેલ્યુઝને મેમોઇઝ કરવું: મોંઘી ગણતરીઓને મેમોઇઝ કરવા અને જો અવલંબન યથાવત રહે તો પુનઃ-ગણતરીઓ અટકાવવા માટે `useMemo` નો ઉપયોગ કરો. જો જરૂર ન હોય તો વધુ પડતા મેમોઇઝેશનને ટાળવા માટે `useMemo` નો ઉપયોગ કરતી વખતે સાવચેત રહો. તે વધારાનો ઓવરહેડ ઉમેરી શકે છે.

              
    const calculatedValue = useMemo(() => { /* Expensive calculation */ }, [dependency1, dependency2]);
    
              
  
                
                  Copy
                
              
            

• `useMemo` અને `useCallback` સાથે રેન્ડર પર્ફોર્મન્સને ઓપ્ટિમાઇઝ કરવું:** `useMemo` અને `useCallback` નો ક્યારે ઉપયોગ કરવો તે કાળજીપૂર્વક વિચારો. તેમનો વધુ પડતો ઉપયોગ કરવાનું ટાળો કારણ કે તે ઓવરહેડ પણ ઉમેરે છે, ખાસ કરીને ઘણા બધા સ્ટેટ ફેરફારોવાળા કમ્પોનન્ટમાં.
• કોડ સ્પ્લિટિંગ અને લેઝી લોડિંગ: કમ્પોનન્ટ્સ અને કોડ મોડ્યુલ્સને ફક્ત ત્યારે જ લોડ કરો જ્યારે તેમની જરૂર હોય. કોડ સ્પ્લિટિંગ અને લેઝી લોડિંગ પ્રારંભિક બંડલ કદ અને મેમરી ફૂટપ્રિન્ટ ઘટાડે છે, પ્રારંભિક લોડ સમય અને રિસ્પોન્સિવનેસમાં સુધારો કરે છે. રિએક્ટ `React.lazy` અને `` સાથે બિલ્ટ-ઇન સોલ્યુશન્સ ઓફર કરે છે. માંગ પર એપ્લિકેશનના ભાગોને લોડ કરવા માટે ડાયનેમિક `import()` સ્ટેટમેન્ટનો ઉપયોગ કરવાનું વિચારો.

              
     const MyComponent = React.lazy(() => import('./MyComponent'));
     
     function App() {
         return (
             Loading...

  }> ); }
  Copy