ઉત્તમ પર્ફોર્મન્સને અનલોક કરવું: રિએક્ટ પ્રોફાઇલર API માં ઊંડાણપૂર્વકનો અભ્યાસ

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

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

રિએક્ટ પ્રોફાઇલર API શું છે?

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

તે આના જેવા ગંભીર પ્રશ્નોના જવાબ આપે છે:

• એક ચોક્કસ કમ્પોનન્ટને રેન્ડર થવામાં કેટલો સમય લાગે છે?
• યુઝર ઇન્ટરેક્શન દરમિયાન એક કમ્પોનન્ટ કેટલી વાર ફરીથી રેન્ડર થાય છે?
• શા માટે કોઈ ચોક્કસ કમ્પોનન્ટ ફરીથી રેન્ડર થયું?

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

પ્રોફાઇલર મુખ્યત્વે બે સ્વરૂપોમાં ઉપલબ્ધ છે:

1. રિએક્ટ ડેવટૂલ્સ એક્સટેન્શન: એક યુઝર-ફ્રેન્ડલી, ગ્રાફિકલ ઇન્ટરફેસ જે સીધા તમારા બ્રાઉઝરના ડેવલપર ટૂલ્સમાં સંકલિત છે. પ્રોફાઇલિંગ શરૂ કરવાની આ સૌથી સામાન્ય રીત છે.
2. પ્રોગ્રામેટિક `` કમ્પોનન્ટ: એક કમ્પોનન્ટ જેને તમે પ્રોગ્રામેટિકલી પર્ફોર્મન્સ માપન એકત્રિત કરવા માટે સીધા તમારા JSX કોડમાં ઉમેરી શકો છો, જે ઓટોમેટેડ ટેસ્ટિંગ અથવા એનાલિટિક્સ સર્વિસ પર મેટ્રિક્સ મોકલવા માટે ઉપયોગી છે.

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

શરૂઆત કરવી: રિએક્ટ પ્રોફાઇલરનો ઉપયોગ કેવી રીતે કરવો

ચાલો વ્યવહારુ બનીએ. તમારી એપ્લિકેશનનું પ્રોફાઇલિંગ કરવું એ એક સીધી પ્રક્રિયા છે, અને બંને પદ્ધતિઓને સમજવાથી તમને મહત્તમ સુગમતા મળશે.

પદ્ધતિ 1: રિએક્ટ ડેવટૂલ્સ પ્રોફાઇલર ટેબ

રોજિંદા મોટાભાગના પર્ફોર્મન્સ ડિબગિંગ માટે, રિએક્ટ ડેવટૂલ્સમાં પ્રોફાઇલર ટેબ તમારું મુખ્ય સાધન છે. જો તમે તે ઇન્સ્ટોલ કર્યું નથી, તો તે પ્રથમ પગલું છે—તમારા પસંદગીના બ્રાઉઝર (ક્રોમ, ફાયરફોક્સ, એજ) માટે એક્સટેન્શન મેળવો.

તમારું પ્રથમ પ્રોફાઇલિંગ સત્ર ચલાવવા માટે અહીં એક પગલું-દર-પગલું માર્ગદર્શિકા છે:

1. તમારી એપ્લિકેશન ખોલો: ડેવલપમેન્ટ મોડમાં ચાલી રહેલી તમારી રિએક્ટ એપ્લિકેશન પર નેવિગેટ કરો. જો તમને તમારા બ્રાઉઝરના એક્સટેન્શન બારમાં રિએક્ટ આઇકન દેખાય તો તમને ખબર પડશે કે ડેવટૂલ્સ સક્રિય છે.
2. ડેવલપર ટૂલ્સ ખોલો: તમારા બ્રાઉઝરના ડેવલપર ટૂલ્સ ખોલો (સામાન્ય રીતે F12 અથવા Ctrl+Shift+I / Cmd+Option+I સાથે) અને "Profiler" ટેબ શોધો. જો તમારી પાસે ઘણા ટેબ્સ હોય, તો તે "»" એરો પાછળ છુપાયેલ હોઈ શકે છે.
3. પ્રોફાઇલિંગ શરૂ કરો: તમને પ્રોફાઇલર UI માં એક વાદળી વર્તુળ (રેકોર્ડ બટન) દેખાશે. પર્ફોર્મન્સ ડેટા રેકોર્ડ કરવાનું શરૂ કરવા માટે તેના પર ક્લિક કરો.
4. તમારી એપ સાથે ઇન્ટરેક્ટ કરો: તમે જે ક્રિયાને માપવા માંગો છો તે કરો. આ પેજ લોડ કરવાથી, મોડલ ખોલતા બટન પર ક્લિક કરવાથી, ફોર્મમાં ટાઇપ કરવાથી, અથવા મોટી સૂચિને ફિલ્ટર કરવા સુધી કંઈપણ હોઈ શકે છે. ધ્યેય એ યુઝર ઇન્ટરેક્શનને ફરીથી બનાવવાનો છે જે ધીમું લાગે છે.
5. પ્રોફાઇલિંગ બંધ કરો: એકવાર તમે ઇન્ટરેક્શન પૂર્ણ કરી લો, પછી સત્રને રોકવા માટે ફરીથી રેકોર્ડ બટન (તે હવે લાલ હશે) પર ક્લિક કરો.

બસ આટલું જ! પ્રોફાઇલર તેના દ્વારા એકત્રિત કરાયેલ ડેટા પર પ્રક્રિયા કરશે અને તે ઇન્ટરેક્શન દરમિયાન તમારી એપ્લિકેશનના રેન્ડર પર્ફોર્મન્સનું વિગતવાર વિઝ્યુલાઇઝેશન રજૂ કરશે.

પદ્ધતિ 2: પ્રોગ્રામેટિક `Profiler` કમ્પોનન્ટ

જ્યારે ડેવટૂલ્સ ઇન્ટરેક્ટિવ ડિબગિંગ માટે ઉત્તમ છે, ત્યારે કેટલીકવાર તમારે આપમેળે પર્ફોર્મન્સ ડેટા એકત્રિત કરવાની જરૂર પડે છે. `` કમ્પોનન્ટ, જે `react` પેકેજમાંથી એક્સપોર્ટ થયેલ છે, તમને તે જ કરવાની મંજૂરી આપે છે.

તમે તમારા કમ્પોનન્ટ ટ્રીના કોઈપણ ભાગને `` કમ્પોનન્ટથી વીંટાળી શકો છો. તેને બે પ્રોપ્સની જરૂર છે:

• `id` (string): તમે જે ટ્રીના ભાગનું પ્રોફાઇલિંગ કરી રહ્યા છો તેના માટે એક અનન્ય ઓળખકર્તા. આ તમને વિવિધ પ્રોફાઇલર્સના માપને અલગ પાડવામાં મદદ કરે છે.
• `onRender` (function): એક કોલબેક ફંક્શન જેને રિએક્ટ દર વખતે બોલાવે છે જ્યારે પ્રોફાઇલ કરેલ ટ્રીની અંદરનો કમ્પોનન્ટ કોઈ અપડેટ "કમીટ" કરે છે.

અહીં એક કોડ ઉદાહરણ છે:

import React, { Profiler } from 'react';

// onRender કોલબેક
function onRenderCallback(
  id, // પ્રોફાઇલર ટ્રીનો "id" પ્રોપ જે હમણાં જ કમીટ થયો છે
  phase, // "mount" (જો ટ્રી હમણાં જ માઉન્ટ થયું હોય) અથવા "update" (જો તે ફરીથી રેન્ડર થયું હોય)
  actualDuration, // કમીટ થયેલ અપડેટને રેન્ડર કરવામાં વિતાવેલો સમય
  baseDuration, // મેમોઇઝેશન વિના સમગ્ર સબટ્રીને રેન્ડર કરવાનો અંદાજિત સમય
  startTime, // જ્યારે રિએક્ટે આ અપડેટ રેન્ડર કરવાનું શરૂ કર્યું
  commitTime, // જ્યારે રિએક્ટે આ અપડેટ કમીટ કર્યું
  interactions // અપડેટને ટ્રિગર કરનાર ઇન્ટરેક્શન્સનો સમૂહ
) {
  // તમે આ ડેટાને લોગ કરી શકો છો, તેને એનાલિટિક્સ એન્ડપોઇન્ટ પર મોકલી શકો છો, અથવા તેને એકત્રિત કરી શકો છો.
  console.log({
    id,
    phase,
    actualDuration,
    baseDuration,
    startTime,
    commitTime,
  });
}

function App() {
  return (
    

      
        
      
      

        
          
        
      
    
  );
}

`onRender` કોલબેક પેરામીટર્સને સમજવું:

• `id`: તમે `` કમ્પોનન્ટને પાસ કરેલ સ્ટ્રિંગ `id`.
• `phase`: કાં તો `"mount"` (કમ્પોનન્ટ પ્રથમ વખત માઉન્ટ થયું) અથવા `"update"` (તે પ્રોપ્સ, સ્ટેટ, અથવા હુક્સમાં ફેરફારને કારણે ફરીથી રેન્ડર થયું).
• `actualDuration`: આ વિશિષ્ટ અપડેટ માટે `` અને તેના ડિસેન્ડન્ટ્સને રેન્ડર કરવામાં લાગતો સમય, મિલિસેકન્ડમાં. ધીમા રેન્ડર્સને ઓળખવા માટે આ તમારું મુખ્ય મેટ્રિક છે.
• `baseDuration`: શરૂઆતથી સંપૂર્ણ સબટ્રીને રેન્ડર કરવામાં કેટલો સમય લાગશે તેનો અંદાજ. આ "સૌથી ખરાબ" પરિદ્રશ્ય છે અને કમ્પોનન્ટ ટ્રીની એકંદર જટિલતાને સમજવા માટે ઉપયોગી છે. જો `actualDuration` `baseDuration` કરતાં ઘણું નાનું હોય, તો તે સૂચવે છે કે મેમોઇઝેશન જેવા ઓપ્ટિમાઇઝેશન અસરકારક રીતે કામ કરી રહ્યા છે.
• `startTime` અને `commitTime`: જ્યારે રિએક્ટે રેન્ડરિંગ શરૂ કર્યું અને જ્યારે તેણે DOM પર અપડેટ કમીટ કર્યું તે માટેના ટાઇમસ્ટેમ્પ્સ. આનો ઉપયોગ સમય જતાં પર્ફોર્મન્સને ટ્રેક કરવા માટે થઈ શકે છે.
• `interactions`: જ્યારે અપડેટ શેડ્યૂલ કરવામાં આવ્યું ત્યારે ટ્રેસ કરવામાં આવી રહેલા "ઇન્ટરેક્શન્સ" નો સમૂહ (આ અપડેટ્સના કારણને ટ્રેસ કરવા માટેના પ્રાયોગિક API નો એક ભાગ છે).

પ્રોફાઇલરના આઉટપુટનું અર્થઘટન: એક માર્ગદર્શિત પ્રવાસ

તમે રિએક્ટ ડેવટૂલ્સમાં રેકોર્ડિંગ સત્ર બંધ કર્યા પછી, તમને ઘણી બધી માહિતી રજૂ કરવામાં આવે છે. ચાલો UI ના મુખ્ય ભાગોને સમજીએ.

કમીટ સિલેક્ટર

પ્રોફાઇલરની ટોચ પર, તમને એક બાર ચાર્ટ દેખાશે. આ ચાર્ટમાં દરેક બાર તમારા રેકોર્ડિંગ દરમિયાન રિએક્ટે DOM પર કરેલા એક "કમીટ" નું પ્રતિનિધિત્વ કરે છે. બારની ઊંચાઈ અને રંગ સૂચવે છે કે તે કમીટને રેન્ડર થવામાં કેટલો સમય લાગ્યો—ઊંચા, પીળા/નારંગી બાર ટૂંકા, વાદળી/લીલા બાર કરતાં વધુ ખર્ચાળ છે. તમે દરેક વિશિષ્ટ રેન્ડર ચક્રની વિગતો તપાસવા માટે આ બાર પર ક્લિક કરી શકો છો.

ફ્લેમગ્રાફ ચાર્ટ

આ સૌથી શક્તિશાળી વિઝ્યુલાઇઝેશન છે. પસંદ કરેલ કમીટ માટે, ફ્લેમગ્રાફ તમને બતાવે છે કે તમારી એપ્લિકેશનમાં કયા કમ્પોનન્ટ્સ રેન્ડર થયા. તેને કેવી રીતે વાંચવું તે અહીં છે:

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

રેન્ક્ડ ચાર્ટ

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

કમ્પોનન્ટ ડિટેઇલ્સ પેન

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

• રેન્ડર સમયગાળો: તે પસંદ કરેલ કમીટમાં તે કમ્પોનન્ટ માટે `actualDuration` અને `baseDuration` બતાવે છે.
• "અહીં રેન્ડર થયું": આ તે બધા કમીટ્સની સૂચિ આપે છે જેમાં આ કમ્પોનન્ટ રેન્ડર થયું હતું, જેનાથી તમે ઝડપથી જોઈ શકો છો કે તે કેટલી વાર અપડેટ થાય છે.
• "આ શા માટે રેન્ડર થયું?": આ ઘણીવાર માહિતીનો સૌથી મૂલ્યવાન ભાગ હોય છે. રિએક્ટ ડેવટૂલ્સ તમને કહેવાનો શ્રેષ્ઠ પ્રયાસ કરશે કે કોઈ કમ્પોનન્ટ શા માટે ફરીથી રેન્ડર થયું. સામાન્ય કારણોમાં શામેલ છે:
  • પ્રોપ્સ બદલાયા
  • હુક્સ બદલાયા (દા.ત., `useState` અથવા `useReducer` વેલ્યુ અપડેટ થઈ)
  • પેરન્ટ કમ્પોનન્ટ રેન્ડર થયું (ચાઇલ્ડ કમ્પોનન્ટ્સમાં બિનજરૂરી રી-રેન્ડર્સનું આ એક સામાન્ય કારણ છે)
  • કોન્ટેક્સ્ટ બદલાયું

સામાન્ય પર્ફોર્મન્સ સમસ્યાઓ અને તેને કેવી રીતે સુધારવી

હવે જ્યારે તમે જાણો છો કે પર્ફોર્મન્સ ડેટા કેવી રીતે એકત્રિત કરવો અને વાંચવો, ચાલો પ્રોફાઇલર દ્વારા ઉજાગર થતી સામાન્ય સમસ્યાઓ અને તેને ઉકેલવા માટેની સ્ટાન્ડર્ડ રિએક્ટ પેટર્નનું અન્વેષણ કરીએ.

સમસ્યા 1: બિનજરૂરી રી-રેન્ડર્સ

આ રિએક્ટ એપ્લિકેશન્સમાં અત્યાર સુધીની સૌથી સામાન્ય પર્ફોર્મન્સ સમસ્યા છે. તે ત્યારે થાય છે જ્યારે કોઈ કમ્પોનન્ટ ફરીથી રેન્ડર થાય છે, ભલે તેનું આઉટપુટ બરાબર એ જ હોય. આ CPU સાયકલનો બગાડ કરે છે અને તમારા UI ને ધીમું બનાવી શકે છે.

નિદાન:

• પ્રોફાઇલરમાં, તમે એક કમ્પોનન્ટને ઘણા કમીટ્સમાં વારંવાર રેન્ડર થતું જુઓ છો.
• "આ શા માટે રેન્ડર થયું?" વિભાગ સૂચવે છે કે તે એટલા માટે છે કારણ કે તેનું પેરન્ટ કમ્પોનન્ટ ફરીથી રેન્ડર થયું, ભલે તેના પોતાના પ્રોપ્સ બદલાયા ન હોય.
• ફ્લેમગ્રાફમાં ઘણા કમ્પોનન્ટ્સ રંગીન હોય છે, ભલે તેઓ જે સ્ટેટના નાના ભાગ પર આધાર રાખે છે તે જ ખરેખર બદલાયું હોય.

ઉકેલ 1: `React.memo()`

`React.memo` એ એક હાયર-ઓર્ડર કમ્પોનન્ટ (HOC) છે જે તમારા કમ્પોનન્ટને મેમોઇઝ કરે છે. તે કમ્પોનન્ટના પાછલા અને નવા પ્રોપ્સની શેલો કમ્પેરિઝન કરે છે. જો પ્રોપ્સ સમાન હોય, તો રિએક્ટ કમ્પોનન્ટને ફરીથી રેન્ડર કરવાનું છોડી દેશે અને છેલ્લા રેન્ડર થયેલા પરિણામનો ફરીથી ઉપયોગ કરશે.

`React.memo` પહેલાં:**

function UserAvatar({ userName, avatarUrl }) {
  console.log(`Rendering UserAvatar for ${userName}`)
  return ;
}

// પેરન્ટમાં:
// જો પેરન્ટ કોઈ પણ કારણસર ફરીથી રેન્ડર થાય છે (દા.ત., તેનું પોતાનું સ્ટેટ બદલાય છે),
// UserAvatar ફરીથી રેન્ડર થશે, ભલે userName અને avatarUrl સમાન હોય.

import React from 'react';

const UserAvatar = React.memo(function UserAvatar({ userName, avatarUrl }) {
  console.log(`Rendering UserAvatar for ${userName}`)
  return ;
});

// હવે, UserAvatar ફક્ત ત્યારે જ ફરીથી રેન્ડર થશે જો userName અથવા avatarUrl પ્રોપ્સ ખરેખર બદલાય.

function ParentComponent() {
  const [count, setCount] = useState(0);

  // આ ફંક્શન ParentComponent ના દરેક રેન્ડર પર ફરીથી બનાવવામાં આવે છે
  const handleItemClick = (id) => {
    console.log('Clicked item', id);
  };

  return (
    

       setCount(c => c + 1)}>Increment {count}
      {/* MemoizedListItem દરેક વખતે જ્યારે count બદલાશે ત્યારે ફરીથી રેન્ડર થશે, કારણ કે handleItemClick એક નવું ફંક્શન છે */}
      
    
  );
}

import { useState, useCallback } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  // આ ફંક્શન હવે મેમોઇઝ્ડ છે અને તેની ડિપેન્ડન્સીઝ (ખાલી એરે) બદલાય નહીં ત્યાં સુધી ફરીથી બનાવવામાં આવશે નહીં.
  const handleItemClick = useCallback((id) => {
    console.log('Clicked item', id);
  }, []); // ખાલી ડિપેન્ડન્સી એરેનો અર્થ છે કે તે ફક્ત એક જ વાર બનાવવામાં આવે છે

  return (
    

       setCount(c => c + 1)}>Increment {count}
      {/* હવે, જ્યારે count બદલાશે ત્યારે MemoizedListItem ફરીથી રેન્ડર થશે નહીં */}
      
    
  );
}

function ProductList({ products, filterTerm }) {
  // આ મોંઘી ફિલ્ટરિંગ ઓપરેશન ProductList ના દરેક રેન્ડર પર ચાલે છે,
  // ભલે કોઈ અસંબંધિત પ્રોપ બદલાયો હોય.
  const visibleProducts = products.filter(p => p.name.includes(filterTerm));

  return (
    

      {visibleProducts.map(p => 
{p.name}
)}
    
  );
}

import { useMemo } from 'react';

function ProductList({ products, filterTerm }) {
  // આ ગણતરી હવે ફક્ત ત્યારે જ ચાલે છે જ્યારે `products` અથવા `filterTerm` બદલાય છે.
  const visibleProducts = useMemo(() => {
    return products.filter(p => p.name.includes(filterTerm));
  }, [products, filterTerm]);

  return (
    

      {visibleProducts.map(p => 
{p.name}
)}
    
  );
}

// AppContext.js
const AppContext = createContext({ 
  currentUser: null, 
  theme: 'light', 
  language: 'en',
  setTheme: () => {}, 
  // ... અને અન્ય 20 વેલ્યુઝ
});

// MyComponent.js
// આ કમ્પોનન્ટને ફક્ત currentUser ની જરૂર છે, પરંતુ થીમ બદલાશે ત્યારે તે ફરીથી રેન્ડર થશે!
const { currentUser } = useContext(AppContext);

// UserContext.js
const UserContext = createContext(null);

// ThemeContext.js
const ThemeContext = createContext({ theme: 'light', setTheme: () => {} });

// MyComponent.js
// આ કમ્પોનન્ટ હવે ફક્ત ત્યારે જ ફરીથી રેન્ડર થશે જ્યારે currentUser બદલાશે.
const currentUser = useContext(UserContext);

// webpack.config.js
module.exports = {
  // ... other config
  resolve: {
    alias: {
      'react-dom$': 'react-dom/profiling',
    },
  },
};