റിയാക്റ്റ് പെർഫോമൻസിൽ വൈദഗ്ദ്ധ്യം നേടാം: റിയാക്റ്റ് പ്രൊഫൈലർ കമ്പോണന്റിനെക്കുറിച്ചുള്ള ഒരു ആഴത്തിലുള്ള പഠനം

വെബ് ഡെവലപ്‌മെന്റിന്റെ ചലനാത്മകമായ ലോകത്ത്, തടസ്സമില്ലാത്തതും വേഗതയേറിയതുമായ ഒരു ഉപയോക്തൃ അനുഭവം നൽകുന്നത് പരമപ്രധാനമാണ്. യൂസർ ഇന്റർഫേസുകൾ നിർമ്മിക്കുന്നതിനുള്ള ഒരു ജനപ്രിയ ജാവാസ്ക്രിപ്റ്റ് ലൈബ്രറിയായ റിയാക്റ്റ് ഉപയോഗിച്ച് നിർമ്മിച്ച ആപ്ലിക്കേഷനുകൾക്ക്, പ്രകടനം മനസ്സിലാക്കുകയും ഒപ്റ്റിമൈസ് ചെയ്യുകയും ചെയ്യുന്നത് ഒരു മികച്ച പരിശീലനം മാത്രമല്ല, ഒരു ആവശ്യകത കൂടിയാണ്. ഇത് നേടുന്നതിന് ഒരു റിയാക്റ്റ് ഡെവലപ്പറുടെ പക്കലുള്ള ഏറ്റവും ശക്തമായ ടൂളുകളിൽ ഒന്നാണ് റിയാക്റ്റ് പ്രൊഫൈലർ കമ്പോണന്റ്. ഈ സമഗ്രമായ ഗൈഡ്, റിയാക്റ്റ് പ്രൊഫൈലർ എന്താണെന്നും അത് എങ്ങനെ ഫലപ്രദമായി ഉപയോഗിക്കാമെന്നും, മിന്നൽ വേഗതയുള്ളതും ആഗോളതലത്തിൽ ലഭ്യമായതുമായ റിയാക്റ്റ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കാൻ ഇത് നിങ്ങളെ എങ്ങനെ സഹായിക്കുമെന്നും മനസ്സിലാക്കാനുള്ള ഒരു ആഴത്തിലുള്ള യാത്രയിലേക്ക് നിങ്ങളെ കൊണ്ടുപോകും.

എന്തുകൊണ്ടാണ് റിയാക്റ്റ് ആപ്ലിക്കേഷനുകളിൽ പെർഫോമൻസ് പ്രധാനമാകുന്നത്

പ്രൊഫൈലറിന്റെ വിശദാംശങ്ങളിലേക്ക് കടക്കുന്നതിന് മുമ്പ്, എന്തുകൊണ്ടാണ് പ്രകടനം ഇത്രയധികം നിർണായകമാകുന്നത് എന്ന് സ്ഥാപിക്കാം, പ്രത്യേകിച്ചും ഒരു ആഗോള ഉപയോക്താക്കൾക്ക്:

• ഉപയോക്താക്കളെ നിലനിർത്തലും സംതൃപ്തിയും: പതുക്കെ ലോഡുചെയ്യുന്നതോ പ്രതികരിക്കാത്തതോ ആയ ആപ്ലിക്കേഷനുകൾ ഉപയോക്താക്കൾ ഉപേക്ഷിക്കുന്നതിനുള്ള ഒരു പ്രധാന കാരണമാണ്. വിവിധ ഭൂമിശാസ്ത്രപരമായ സ്ഥലങ്ങളിലുള്ള, വ്യത്യസ്ത ഇന്റർനെറ്റ് വേഗതയും ഉപകരണ ശേഷിയുമുള്ള ഉപയോക്താക്കൾക്ക്, മികച്ച പ്രകടനമുള്ള ഒരു ആപ്ലിക്കേഷൻ സംതൃപ്തിക്ക് അത്യന്താപേക്ഷിതമാണ്.
• കൺവേർഷൻ നിരക്കുകൾ: ഇ-കൊമേഴ്സ്, സേവന അധിഷ്ഠിത ആപ്ലിക്കേഷനുകളിൽ, ചെറിയ കാലതാമസം പോലും കൺവേർഷൻ നിരക്കുകളെ കാര്യമായി ബാധിക്കും. സുഗമമായ പ്രകടനം മികച്ച ബിസിനസ്സ് ഫലങ്ങളിലേക്ക് നേരിട്ട് നയിക്കുന്നു.
• എസ്ഇഒ റാങ്കിംഗ്: ഗൂഗിൾ പോലുള്ള സെർച്ച് എഞ്ചിനുകൾ പേജ് വേഗതയെ ഒരു റാങ്കിംഗ് ഘടകമായി കണക്കാക്കുന്നു. മികച്ച പ്രകടനമുള്ള ഒരു ആപ്ലിക്കേഷന് ഉയർന്ന റാങ്ക് ലഭിക്കാൻ സാധ്യതയുണ്ട്, ഇത് ആഗോളതലത്തിൽ അതിന്റെ ദൃശ്യപരത വർദ്ധിപ്പിക്കുന്നു.
• ലഭ്യത: പ്രകടനം എന്നത് ലഭ്യതയുടെ ഒരു പ്രധാന വശമാണ്. ശക്തി കുറഞ്ഞ ഉപകരണങ്ങളിലോ വേഗത കുറഞ്ഞ നെറ്റ്‌വർക്കുകളിലോ ഒരു ആപ്ലിക്കേഷൻ സുഗമമായി പ്രവർത്തിക്കുന്നുവെന്ന് ഉറപ്പാക്കുന്നത് ലോകമെമ്പാടുമുള്ള വിശാലമായ ഉപയോക്താക്കൾക്ക് അത് കൂടുതൽ ലഭ്യമാക്കുന്നു.
• വിഭവക്ഷമത: ഒപ്റ്റിമൈസ് ചെയ്ത ആപ്ലിക്കേഷനുകൾ കുറഞ്ഞ വിഭവങ്ങൾ (സിപിയു, മെമ്മറി, ബാൻഡ്‌വിഡ്ത്ത്) ഉപയോഗിക്കുന്നു, ഇത് ഉപയോക്താക്കൾക്ക് മികച്ച അനുഭവത്തിനും അടിസ്ഥാന സൗകര്യ ചെലവുകൾ കുറയ്ക്കുന്നതിനും കാരണമാകുന്നു.

റിയാക്റ്റ് പ്രൊഫൈലർ കമ്പോണന്റിനെ പരിചയപ്പെടാം

റിയാക്റ്റ് പ്രൊഫൈലർ, റിയാക്റ്റ് തന്നെ നൽകുന്ന ഒരു ബിൽറ്റ്-ഇൻ കമ്പോണന്റാണ്, ഇത് നിങ്ങളുടെ റിയാക്റ്റ് ആപ്ലിക്കേഷനുകളുടെ പ്രകടനം അളക്കാൻ സഹായിക്കുന്നതിനായി പ്രത്യേകം രൂപകൽപ്പന ചെയ്തിട്ടുള്ളതാണ്. ഇത് കമ്പോണന്റുകളുടെ കമ്മിറ്റ് സമയങ്ങൾ രേഖപ്പെടുത്തിക്കൊണ്ട് പ്രവർത്തിക്കുന്നു, ഏതൊക്കെ കമ്പോണന്റുകളാണ് അമിതമായി റെൻഡർ ചെയ്യുന്നതെന്നോ റെൻഡർ ചെയ്യാൻ കൂടുതൽ സമയമെടുക്കുന്നതെന്നോ തിരിച്ചറിയാൻ നിങ്ങളെ അനുവദിക്കുന്നു. പ്രകടനത്തിലെ തടസ്സങ്ങൾ കണ്ടെത്താൻ ഈ ഡാറ്റ അമൂല്യമാണ്.

പ്രൊഫൈലിംഗിനായി ഒരു പ്രത്യേക ടാബ് വാഗ്ദാനം ചെയ്യുന്ന റിയാക്റ്റ് ഡെവലപ്പർ ടൂൾസ് ബ്രൗസർ എക്സ്റ്റൻഷൻ വഴിയാണ് സാധാരണയായി പ്രൊഫൈലർ ആക്സസ് ചെയ്യുന്നത്. ഇത് നിങ്ങളുടെ ആപ്ലിക്കേഷനെ ഇൻസ്ട്രുമെന്റ് ചെയ്യുകയും കമ്പോണന്റ് റെൻഡർ സൈക്കിളുകളെക്കുറിച്ചുള്ള വിശദമായ വിവരങ്ങൾ ശേഖരിക്കുകയും ചെയ്യുന്നു.

റിയാക്റ്റ് പ്രൊഫൈലിംഗിലെ പ്രധാന ആശയങ്ങൾ

റിയാക്റ്റ് പ്രൊഫൈലർ ഫലപ്രദമായി ഉപയോഗിക്കുന്നതിന്, ചില പ്രധാന ആശയങ്ങൾ മനസ്സിലാക്കേണ്ടത് അത്യാവശ്യമാണ്:

• കമ്മിറ്റുകൾ (Commits): റിയാക്റ്റിൽ, വെർച്വൽ DOM-നെ യഥാർത്ഥ DOM-മായി പൊരുത്തപ്പെടുത്തുന്ന പ്രക്രിയയാണ് ഒരു കമ്മിറ്റ്. നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ സ്റ്റേറ്റിലോ പ്രോപ്പുകളിലോ ഉള്ള മാറ്റങ്ങളെ അടിസ്ഥാനമാക്കി റിയാക്റ്റ് UI അപ്ഡേറ്റ് ചെയ്യുമ്പോഴാണിത്. ഓരോ കമ്മിറ്റിനും എടുക്കുന്ന സമയം പ്രൊഫൈലർ അളക്കുന്നു.
• റെൻഡർ (Render): കമ്പോണന്റുകളുടെ നിലവിലെ ഔട്ട്പുട്ട് (വെർച്വൽ DOM) ലഭിക്കുന്നതിനായി റിയാക്റ്റ് നിങ്ങളുടെ കമ്പോണന്റ് ഫംഗ്ഷനുകളെയോ ക്ലാസ് മെത്തേഡുകളെയോ വിളിക്കുന്ന ഘട്ടമാണിത്. കമ്പോണന്റുകൾ സങ്കീർണ്ണമാണെങ്കിലോ അനാവശ്യമായി വീണ്ടും റെൻഡർ ചെയ്യുകയാണെങ്കിലോ ഈ ഘട്ടം സമയമെടുക്കുന്നതാകാം.
• റീകൺസിലിയേഷൻ (Reconciliation): UI-ൽ എന്താണ് മാറിയതെന്ന് റിയാക്റ്റ് നിർണ്ണയിക്കുകയും DOM കാര്യക്ഷമമായി അപ്ഡേറ്റ് ചെയ്യുകയും ചെയ്യുന്ന പ്രക്രിയയാണിത്.
• പ്രൊഫൈലിംഗ് സെഷൻ: നിങ്ങളുടെ ആപ്ലിക്കേഷനുമായി സംവദിക്കുമ്പോൾ ഒരു നിശ്ചിത സമയത്തേക്ക് പെർഫോമൻസ് ഡാറ്റ റെക്കോർഡ് ചെയ്യുന്നതിനെയാണ് പ്രൊഫൈലിംഗ് സെഷൻ എന്ന് പറയുന്നത്.

റിയാക്റ്റ് പ്രൊഫൈലർ ഉപയോഗിച്ച് തുടങ്ങാം

റിയാക്റ്റ് പ്രൊഫൈലർ ഉപയോഗിക്കാൻ തുടങ്ങാനുള്ള ഏറ്റവും എളുപ്പ മാർഗം റിയാക്റ്റ് ഡെവലപ്പർ ടൂൾസ് ബ്രൗസർ എക്സ്റ്റൻഷൻ ഇൻസ്റ്റാൾ ചെയ്യുക എന്നതാണ്. ക്രോം, ഫയർഫോക്സ്, എഡ്ജ് എന്നിവയ്ക്ക് ലഭ്യമായ ഈ ടൂളുകൾ, പ്രൊഫൈലർ ഉൾപ്പെടെ റിയാക്റ്റ് ആപ്ലിക്കേഷനുകൾ പരിശോധിക്കുന്നതിനും ഡീബഗ് ചെയ്യുന്നതിനുമുള്ള ഒരു കൂട്ടം യൂട്ടിലിറ്റികൾ നൽകുന്നു.

ഇൻസ്റ്റാൾ ചെയ്തുകഴിഞ്ഞാൽ, ബ്രൗസറിൽ നിങ്ങളുടെ റിയാക്റ്റ് ആപ്ലിക്കേഷൻ തുറന്ന് ഡെവലപ്പർ ടൂൾസ് തുറക്കുക (സാധാരണയായി F12 അമർത്തുകയോ റൈറ്റ് ക്ലിക്ക് ചെയ്ത് "Inspect" തിരഞ്ഞെടുക്കുകയോ ചെയ്യുക). "Components", "Network" പോലുള്ള മറ്റ് ടാബുകൾക്കൊപ്പം ഒരു "Profiler" ടാബും നിങ്ങൾ കാണും.

പ്രൊഫൈലർ ടാബ് ഉപയോഗിക്കുന്ന വിധം

പ്രൊഫൈലർ ടാബ് സാധാരണയായി ഒരു ടൈംലൈൻ വ്യൂവും ഒരു ഫ്ലേം ഗ്രാഫ് വ്യൂവും അവതരിപ്പിക്കുന്നു:

• ടൈംലൈൻ വ്യൂ (Timeline View): ഈ വ്യൂ കമ്മിറ്റുകളുടെ കാലക്രമത്തിലുള്ള ഒരു റെക്കോർഡ് കാണിക്കുന്നു. ഓരോ ബാറും ഒരു കമ്മിറ്റിനെ പ്രതിനിധീകരിക്കുന്നു, അതിന്റെ നീളം ആ കമ്മിറ്റിന് എടുത്ത സമയം സൂചിപ്പിക്കുന്നു. ഉൾപ്പെട്ട കമ്പോണന്റുകളെക്കുറിച്ചുള്ള വിശദാംശങ്ങൾ കാണുന്നതിന് നിങ്ങൾക്ക് ബാറുകൾക്ക് മുകളിൽ ഹോവർ ചെയ്യാൻ കഴിയും.
• ഫ്ലേം ഗ്രാഫ് വ്യൂ (Flame Graph View): ഈ വ്യൂ നിങ്ങളുടെ കമ്പോണന്റ് ട്രീയുടെ ഒരു ശ്രേണീകൃത പ്രാതിനിധ്യം നൽകുന്നു. വീതിയുള്ള ബാറുകൾ റെൻഡർ ചെയ്യാൻ കൂടുതൽ സമയമെടുത്ത കമ്പോണന്റുകളെ സൂചിപ്പിക്കുന്നു. റെൻഡറിംഗ് സമയത്തിന് ഏറ്റവും കൂടുതൽ സംഭാവന നൽകുന്ന കമ്പോണന്റുകൾ ഏതെന്ന് വേഗത്തിൽ തിരിച്ചറിയാൻ ഇത് നിങ്ങളെ സഹായിക്കുന്നു.

പ്രൊഫൈലിംഗ് ആരംഭിക്കുന്നതിന്:

1. റിയാക്റ്റ് ഡെവലപ്പർ ടൂൾസിലെ "Profiler" ടാബിലേക്ക് പോകുക.
2. "Record" ബട്ടണിൽ (പലപ്പോഴും ഒരു സർക്കിൾ ഐക്കൺ) ക്ലിക്ക് ചെയ്യുക.
3. പ്രകടന പ്രശ്‌നങ്ങൾക്ക് കാരണമായേക്കാമെന്ന് നിങ്ങൾ സംശയിക്കുന്ന പ്രവർത്തനങ്ങൾ നടത്തിക്കൊണ്ട് സാധാരണ ചെയ്യുന്നതുപോലെ നിങ്ങളുടെ ആപ്ലിക്കേഷനുമായി സംവദിക്കുക.
4. നിങ്ങൾ പ്രസക്തമായ ഇടപെടലുകൾ പിടിച്ചെടുത്തു കഴിഞ്ഞാൽ "Stop" ബട്ടണിൽ (പലപ്പോഴും ഒരു സ്ക്വയർ ഐക്കൺ) ക്ലിക്ക് ചെയ്യുക.

അപ്പോൾ പ്രൊഫൈലർ റെക്കോർഡ് ചെയ്ത ഡാറ്റ പ്രദർശിപ്പിക്കും, ഇത് നിങ്ങളുടെ കമ്പോണന്റുകളുടെ പ്രകടനം വിശകലനം ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

പ്രൊഫൈലർ ഡാറ്റ വിശകലനം ചെയ്യുമ്പോൾ: എന്താണ് ശ്രദ്ധിക്കേണ്ടത്

ഒരു പ്രൊഫൈലിംഗ് സെഷൻ നിർത്തിയ ശേഷം, യഥാർത്ഥ ജോലി ആരംഭിക്കുന്നു: ഡാറ്റ വിശകലനം ചെയ്യുക. ശ്രദ്ധ കേന്ദ്രീകരിക്കേണ്ട പ്രധാന കാര്യങ്ങൾ താഴെ പറയുന്നവയാണ്:

1. വേഗത കുറഞ്ഞ റെൻഡറുകൾ കണ്ടെത്തുക

ഗണ്യമായ സമയം എടുക്കുന്ന കമ്മിറ്റുകൾക്കായി നോക്കുക. ടൈംലൈൻ വ്യൂവിൽ, ഇവ ഏറ്റവും നീളമുള്ള ബാറുകളായിരിക്കും. ഫ്ലേം ഗ്രാഫിൽ, ഇവ ഏറ്റവും വീതിയുള്ള ബാറുകളായിരിക്കും.

പ്രവർത്തനക്ഷമമായ ഉൾക്കാഴ്ച: വേഗത കുറഞ്ഞ ഒരു കമ്മിറ്റ് കണ്ടെത്തുമ്പോൾ, അതിൽ ഏതൊക്കെ കമ്പോണന്റുകൾ ഉൾപ്പെട്ടിട്ടുണ്ടെന്ന് കാണാൻ അതിൽ ക്ലിക്ക് ചെയ്യുക. പ്രൊഫൈലർ സാധാരണയായി ആ കമ്മിറ്റിൽ റെൻഡർ ചെയ്ത കമ്പോണന്റുകളെ ഹൈലൈറ്റ് ചെയ്യുകയും അവയ്ക്ക് എത്ര സമയമെടുത്തുവെന്ന് സൂചിപ്പിക്കുകയും ചെയ്യും.

2. അനാവശ്യമായ റീ-റെൻഡറുകൾ കണ്ടെത്തുക

പ്രകടന പ്രശ്നങ്ങളുടെ ഒരു സാധാരണ കാരണം, പ്രോപ്പുകളോ സ്റ്റേറ്റോ യഥാർത്ഥത്തിൽ മാറിയിട്ടില്ലാത്തപ്പോൾ കമ്പോണന്റുകൾ വീണ്ടും റെൻഡർ ചെയ്യുന്നതാണ്. ഇത് കണ്ടെത്താൻ പ്രൊഫൈലർ നിങ്ങളെ സഹായിക്കും.

എന്താണ് ശ്രദ്ധിക്കേണ്ടത്:

• പ്രത്യക്ഷമായ കാരണമില്ലാതെ വളരെ sık sık റെൻഡർ ചെയ്യുന്ന കമ്പോണന്റുകൾ.
• പ്രോപ്പുകളും സ്റ്റേറ്റും മാറ്റമില്ലാത്തതായി തോന്നുമെങ്കിലും, ദീർഘനേരം റെൻഡർ ചെയ്യുന്ന കമ്പോണന്റുകൾ.
• "Why did this render?" ഫീച്ചർ (പിന്നീട് വിശദീകരിക്കും) ഇവിടെ നിർണായകമാണ്.

പ്രവർത്തനക്ഷമമായ ഉൾക്കാഴ്ച: ഒരു കമ്പോണന്റ് അനാവശ്യമായി റീ-റെൻഡർ ചെയ്യുകയാണെങ്കിൽ, എന്തുകൊണ്ടെന്ന് അന്വേഷിക്കുക. സാധാരണ കാരണങ്ങൾ ഉൾപ്പെടുന്നു:

• ഓരോ റെൻഡറിലും പുതിയ ഒബ്ജക്റ്റോ അറേ ലിറ്ററലുകളോ പ്രോപ്പുകളായി നൽകുന്നത്.
• പല ഉപഭോക്തൃ കമ്പോണന്റുകളിലും റീ-റെൻഡറുകൾക്ക് കാരണമാകുന്ന കോൺടെക്സ്റ്റ് അപ്ഡേറ്റുകൾ.
• പാരന്റ് കമ്പോണന്റുകൾ റീ-റെൻഡർ ചെയ്യുകയും പ്രോപ്പുകൾ മാറിയിട്ടില്ലെങ്കിലും അവയുടെ ചൈൽഡ് കമ്പോണന്റുകളെ റീ-റെൻഡർ ചെയ്യാൻ കാരണമാകുകയും ചെയ്യുന്നത്.

3. കമ്പോണന്റ് ഹയറാർക്കിയും റെൻഡറിംഗ് ചെലവുകളും മനസ്സിലാക്കുക

റെൻഡറിംഗ് ട്രീ മനസ്സിലാക്കാൻ ഫ്ലേം ഗ്രാഫ് മികച്ചതാണ്. ഓരോ ബാറിന്റെയും വീതി ആ കമ്പോണന്റും അതിന്റെ ചൈൽഡ് കമ്പോണന്റുകളും റെൻഡർ ചെയ്യാൻ എടുത്ത സമയത്തെ പ്രതിനിധീകരിക്കുന്നു.

എന്താണ് ശ്രദ്ധിക്കേണ്ടത്:

• ഫ്ലേം ഗ്രാഫിന്റെ മുകളിൽ വീതിയുള്ള കമ്പോണന്റുകൾ (അതായത് അവ റെൻഡർ ചെയ്യാൻ വളരെയധികം സമയമെടുക്കുന്നു).
• ഒന്നിലധികം കമ്മിറ്റുകളിലുടനീളം ഫ്ലേം ഗ്രാഫിൽ sık sık പ്രത്യക്ഷപ്പെടുന്ന കമ്പോണന്റുകൾ.

പ്രവർത്തനക്ഷമമായ ഉൾക്കാഴ്ച: ഒരു കമ്പോണന്റ് സ്ഥിരമായി വീതിയുള്ളതാണെങ്കിൽ, അതിന്റെ റെൻഡറിംഗ് ലോജിക് ഒപ്റ്റിമൈസ് ചെയ്യുന്നത് പരിഗണിക്കുക. ഇതിൽ ഉൾപ്പെടാം:

• React.memo (ഫങ്ഷണൽ കമ്പോണന്റുകൾക്ക്) അല്ലെങ്കിൽ PureComponent (ക്ലാസ് കമ്പോണന്റുകൾക്ക്) ഉപയോഗിച്ച് കമ്പോണന്റ് മെമ്മോയിസ് ചെയ്യുക.
• സങ്കീർണ്ണമായ കമ്പോണന്റുകളെ ചെറുതും കൂടുതൽ കൈകാര്യം ചെയ്യാവുന്നതുമായ കമ്പോണന്റുകളായി വിഭജിക്കുക.
• നീളമുള്ള ലിസ്റ്റുകൾക്കായി വെർച്വലൈസേഷൻ പോലുള്ള ടെക്നിക്കുകൾ ഉപയോഗിക്കുക.

4. "Why did this render?" ഫീച്ചർ ഉപയോഗിക്കുക

അനാവശ്യമായ റീ-റെൻഡറുകൾ ഡീബഗ് ചെയ്യുന്നതിനുള്ള ഏറ്റവും ശക്തമായ ഫീച്ചറാണിത്. നിങ്ങൾ പ്രൊഫൈലറിൽ ഒരു കമ്പോണന്റ് തിരഞ്ഞെടുക്കുമ്പോൾ, അത് എന്തുകൊണ്ട് റീ-റെൻഡർ ചെയ്തു എന്നതിനെക്കുറിച്ചുള്ള ഒരു വിശദീകരണം നൽകും, അതിന് കാരണമായ നിർദ്ദിഷ്ട പ്രോപ്പ് അല്ലെങ്കിൽ സ്റ്റേറ്റ് മാറ്റങ്ങൾ ലിസ്റ്റ് ചെയ്യും.

എന്താണ് ശ്രദ്ധിക്കേണ്ടത്:

• മാറ്റം വന്നിട്ടില്ലെന്ന് നിങ്ങൾ പ്രതീക്ഷിക്കുമ്പോൾ റീ-റെൻഡർ കാരണം കാണിക്കുന്ന ഏതൊരു കമ്പോണന്റും.
• പ്രതീക്ഷിക്കാത്തതോ നിസ്സാരമെന്ന് തോന്നുന്നതോ ആയ പ്രോപ്പുകളിലെ മാറ്റങ്ങൾ.

പ്രവർത്തനക്ഷമമായ ഉൾക്കാഴ്ച: അനാവശ്യമായ റീ-റെൻഡറുകളുടെ മൂലകാരണം തിരിച്ചറിയാൻ ഈ വിവരങ്ങൾ ഉപയോഗിക്കുക. ഉദാഹരണത്തിന്, ഒരു പ്രോപ്പ് ഓരോ പാരന്റ് റെൻഡറിലും പുനർനിർമ്മിക്കപ്പെടുന്ന ഒരു ഒബ്ജക്റ്റാണെങ്കിൽ, നിങ്ങൾക്ക് പാരന്റിന്റെ സ്റ്റേറ്റ് മെമ്മോയിസ് ചെയ്യുകയോ പ്രോപ്പുകളായി നൽകുന്ന ഫംഗ്ഷനുകൾക്ക് useCallback ഉപയോഗിക്കുകയോ ചെയ്യേണ്ടി വന്നേക്കാം.

പ്രൊഫൈലർ ഡാറ്റയുടെ സഹായത്തോടെയുള്ള ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കുകൾ

റിയാക്റ്റ് പ്രൊഫൈലറിൽ നിന്നുള്ള ഉൾക്കാഴ്ചകൾ ഉപയോഗിച്ച്, നിങ്ങൾക്ക് ലക്ഷ്യം വെച്ചുള്ള ഒപ്റ്റിമൈസേഷനുകൾ നടപ്പിലാക്കാൻ കഴിയും:

1. React.memo, useMemo എന്നിവ ഉപയോഗിച്ചുള്ള മെമ്മോയിസേഷൻ

React.memo: ഈ ഹയർ-ഓർഡർ കമ്പോണന്റ് നിങ്ങളുടെ ഫങ്ഷണൽ കമ്പോണന്റുകളെ മെമ്മോയിസ് ചെയ്യുന്നു. പ്രോപ്പുകൾ മാറിയിട്ടില്ലെങ്കിൽ റിയാക്റ്റ് കമ്പോണന്റ് റെൻഡർ ചെയ്യുന്നത് ഒഴിവാക്കും. ഒരേ പ്രോപ്പുകളുമായി sık sık റെൻഡർ ചെയ്യുന്ന കമ്പോണന്റുകൾക്ക് ഇത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്.

ഉദാഹരണം:

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

              
                Copy
              
            
          

useMemo: ഈ ഹുക്ക് ഒരു കണക്കുകൂട്ടലിന്റെ ഫലം മെമ്മോയിസ് ചെയ്യുന്നു. ഓരോ റെൻഡറിലും നടത്തുന്ന ചെലവേറിയ കണക്കുകൂട്ടലുകൾക്ക് ഇത് ഉപയോഗപ്രദമാണ്. അതിന്റെ ഡിപൻഡൻസികളിൽ ഒന്ന് മാറുകയാണെങ്കിൽ മാത്രമേ ഫലം വീണ്ടും കണക്കുകൂട്ടുകയുള്ളൂ.

ഉദാഹരണം:

            const memoizedValue = React.useMemo(() => computeExpensiveValue(a, b), [a, b]);
            

              
                Copy
              
            
          

2. useCallback ഉപയോഗിച്ച് ഒപ്റ്റിമൈസ് ചെയ്യുക

കോൾബാക്ക് ഫംഗ്ഷനുകൾ മെമ്മോയിസ് ചെയ്യാൻ useCallback ഉപയോഗിക്കുന്നു. മെമ്മോയിസ് ചെയ്ത ചൈൽഡ് കമ്പോണന്റുകളിലേക്ക് ഫംഗ്ഷനുകൾ പ്രോപ്പുകളായി നൽകുമ്പോൾ ഇത് നിർണായകമാണ്. പാരന്റ് റീ-റെൻഡർ ചെയ്യുകയാണെങ്കിൽ, ഒരു പുതിയ ഫംഗ്ഷൻ ഇൻസ്റ്റൻസ് സൃഷ്ടിക്കപ്പെടും, ഇത് മെമ്മോയിസ് ചെയ്ത ചൈൽഡിനെ അനാവശ്യമായി റീ-റെൻഡർ ചെയ്യാൻ കാരണമാകും. useCallback ഫംഗ്ഷൻ റഫറൻസ് സ്ഥിരമായി നിലനിൽക്കുന്നുവെന്ന് ഉറപ്പാക്കുന്നു.

ഉദാഹരണം:

            const handleClick = React.useCallback(() => {
  doSomething(a, b);
}, [a, b]);
            

              
                Copy
              
            
          

3. നീളമുള്ള ലിസ്റ്റുകൾക്കായി വെർച്വലൈസേഷൻ

നിങ്ങളുടെ ആപ്ലിക്കേഷൻ നീളമുള്ള ഡാറ്റാ ലിസ്റ്റുകൾ പ്രദർശിപ്പിക്കുന്നുവെങ്കിൽ, എല്ലാ ഇനങ്ങളും ഒരേസമയം റെൻഡർ ചെയ്യുന്നത് പ്രകടനത്തെ സാരമായി ബാധിക്കും. വിൻഡോയിംഗ് അല്ലെങ്കിൽ വെർച്വലൈസേഷൻ (react-window അല്ലെങ്കിൽ react-virtualized പോലുള്ള ലൈബ്രറികൾ ഉപയോഗിച്ച്) പോലുള്ള ടെക്നിക്കുകൾ നിലവിൽ വ്യൂപോർട്ടിൽ ദൃശ്യമാകുന്ന ഇനങ്ങൾ മാത്രം റെൻഡർ ചെയ്യുന്നു, ഇത് വലിയ ഡാറ്റാസെറ്റുകളുടെ പ്രകടനം ഗണ്യമായി മെച്ചപ്പെടുത്തുന്നു.

ഒരു നീണ്ട ലിസ്റ്റ് റെൻഡർ ചെയ്യുന്നത് ഒരു തടസ്സമാണെന്ന് സ്ഥിരീകരിക്കാൻ പ്രൊഫൈലർ നിങ്ങളെ സഹായിക്കും, തുടർന്ന് വെർച്വലൈസേഷൻ നടപ്പിലാക്കിയതിന് ശേഷമുള്ള മെച്ചപ്പെടുത്തൽ നിങ്ങൾക്ക് അളക്കാൻ കഴിയും.

4. React.lazy, Suspense എന്നിവ ഉപയോഗിച്ച് കോഡ് സ്പ്ലിറ്റിംഗ്

കോഡ് സ്പ്ലിറ്റിംഗ് നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ ബണ്ടിലിനെ ചെറിയ ഭാഗങ്ങളായി വിഭജിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു, അവ ആവശ്യാനുസരണം ലോഡ് ചെയ്യപ്പെടുന്നു. ഇത് പ്രാരംഭ ലോഡ് സമയങ്ങൾ ഗണ്യമായി മെച്ചപ്പെടുത്തും, പ്രത്യേകിച്ചും വേഗത കുറഞ്ഞ കണക്ഷനുകളുള്ള ഉപയോക്താക്കൾക്ക്. കമ്പോണന്റുകൾക്കായി കോഡ് സ്പ്ലിറ്റിംഗ് എളുപ്പത്തിൽ നടപ്പിലാക്കുന്നതിന് റിയാക്റ്റ് React.lazy, Suspense എന്നിവ നൽകുന്നു.

ഉദാഹരണം:

            const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    

      Loading...
}>