React.memo: ആഗോള പ്രകടനത്തിനായി കോമ്പോണന്റ് മെമ്മോയിസേഷനെക്കുറിച്ചുള്ള ഒരു സമഗ്ര ഗൈഡ്

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

ഈ സമഗ്രമായ ഗൈഡ് React.memo-യെക്കുറിച്ച് ആഴത്തിലുള്ള ഒരു പര്യവേക്ഷണം നൽകാൻ ലക്ഷ്യമിടുന്നു. ഞങ്ങൾ അതിന്റെ അടിസ്ഥാന ഉദ്ദേശ്യം സൂക്ഷ്മമായി പരിശോധിക്കുകയും, അതിന്റെ പ്രവർത്തനരീതികൾ വിശകലനം ചെയ്യുകയും, എപ്പോൾ ഉപയോഗിക്കണം, എപ്പോൾ ഉപയോഗിക്കരുത് എന്നതിനെക്കുറിച്ച് വ്യക്തമായ മാർഗ്ഗനിർദ്ദേശങ്ങൾ നൽകുകയും, സാധാരണ തെറ്റുകൾ തിരിച്ചറിയുകയും, നൂതന സാങ്കേതിക വിദ്യകൾ ചർച്ച ചെയ്യുകയും ചെയ്യും. പ്രകടന ഒപ്റ്റിമൈസേഷനെക്കുറിച്ച് വിവേകപൂർണ്ണവും ഡാറ്റാധിഷ്ഠിതവുമായ തീരുമാനങ്ങൾ എടുക്കാൻ നിങ്ങളെ പ്രാപ്തരാക്കുക എന്നതാണ് ഞങ്ങളുടെ പ്രധാന ലക്ഷ്യം, അതുവഴി നിങ്ങളുടെ റിയാക്ട് ആപ്ലിക്കേഷനുകൾ യഥാർത്ഥ ആഗോള പ്രേക്ഷകർക്ക് അസാധാരണവും സ്ഥിരതയുള്ളതുമായ അനുഭവം നൽകുന്നുവെന്ന് ഉറപ്പാക്കാം.

റിയാക്ടിന്റെ റെൻഡറിംഗ് പ്രക്രിയയും അനാവശ്യ റീ-റെൻഡറുകളുടെ പ്രശ്നവും മനസ്സിലാക്കൽ

React.memo-യുടെ പ്രയോജനവും സ്വാധീനവും പൂർണ്ണമായി മനസ്സിലാക്കാൻ, റിയാക്ട് എങ്ങനെ കോമ്പോണന്റ് റെൻഡറിംഗ് കൈകാര്യം ചെയ്യുന്നുവെന്നും, പ്രധാനമായി, എന്തിനാണ് അനാവശ്യ റീ-റെൻഡറുകൾ സംഭവിക്കുന്നതെന്നും അടിസ്ഥാനപരമായ ഒരു ധാരണ സ്ഥാപിക്കേണ്ടത് അത്യാവശ്യമാണ്. അതിന്റെ കാതലിൽ, ഒരു റിയാക്ട് ആപ്ലിക്കേഷൻ ഒരു ശ്രേണിയിലുള്ള കോമ്പോണന്റ് ട്രീ ആയി രൂപകൽപ്പന ചെയ്തിരിക്കുന്നു. ഒരു കോമ്പോണന്റിന്റെ ആന്തരിക സ്റ്റേറ്റ് അല്ലെങ്കിൽ ബാഹ്യ പ്രോപ്പുകളിൽ ഒരു മാറ്റം സംഭവിക്കുമ്പോൾ, റിയാക്ട് സാധാരണയായി ആ നിർദ്ദിഷ്ട കോമ്പോണന്റിന്റെയും, ഡിഫോൾട്ടായി, അതിന്റെ എല്ലാ ഡിസെൻഡന്റ് കോമ്പോണന്റുകളുടെയും റീ-റെൻഡർ ട്രിഗർ ചെയ്യുന്നു. ഈ കാസ്കേഡിംഗ് റീ-റെൻഡർ സ്വഭാവം ഒരു സാധാരണ സവിശേഷതയാണ്, ഇതിനെ പലപ്പോഴും 'അപ്‌ഡേറ്റിൽ റെൻഡർ ചെയ്യുക' (render-on-update) എന്ന് വിളിക്കുന്നു.

വെർച്വൽ ഡോം, റീകൺസിലിയേഷൻ: ഒരു ആഴത്തിലുള്ള பார்வை

ബ്രൗസറിന്റെ ഡോക്യുമെന്റ് ഒബ്ജക്റ്റ് മോഡലുമായി (DOM) ഇടപഴകുന്നതിലെ വിവേകപൂർണ്ണമായ സമീപനത്തിലാണ് റിയാക്ടിന്റെ മിടുക്ക്. ഓരോ അപ്‌ഡേറ്റിനും യഥാർത്ഥ DOM-ൽ നേരിട്ട് മാറ്റങ്ങൾ വരുത്തുന്നതിനു പകരം - ഇത് കമ്പ്യൂട്ടേഷണലായി ചെലവേറിയ ഒരു പ്രവർത്തനമാണെന്ന് അറിയപ്പെടുന്നു - റിയാക്ട് "വെർച്വൽ ഡോം" എന്നറിയപ്പെടുന്ന ഒരു അമൂർത്തമായ പ്രാതിനിധ്യം ഉപയോഗിക്കുന്നു. ഓരോ തവണ ഒരു കോമ്പോണന്റ് റെൻഡർ ചെയ്യുമ്പോഴും (അല്ലെങ്കിൽ റീ-റെൻഡർ ചെയ്യുമ്പോഴും), റിയാക്ട് റിയാക്ട് എലമെന്റുകളുടെ ഒരു ട്രീ നിർമ്മിക്കുന്നു, ഇത് യഥാർത്ഥത്തിൽ പ്രതീക്ഷിക്കുന്ന DOM ഘടനയുടെ ഭാരം കുറഞ്ഞ, ഇൻ-മെമ്മറി പ്രാതിനിധ്യമാണ്. ഒരു കോമ്പോണന്റിന്റെ സ്റ്റേറ്റ് അല്ലെങ്കിൽ പ്രോപ്പുകൾ മാറുമ്പോൾ, റിയാക്ട് ഒരു പുതിയ വെർച്വൽ ഡോം ട്രീ സൃഷ്ടിക്കുന്നു. ഈ പുതിയ ട്രീയും മുൻപത്തേതും തമ്മിലുള്ള തുടർന്നുള്ള, വളരെ കാര്യക്ഷമമായ താരതമ്യ പ്രക്രിയയെ "റീകൺസിലിയേഷൻ" എന്ന് പറയുന്നു.

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

അനാവശ്യ റീ-റെൻഡറുകൾ ആഗോള ഉപയോക്തൃ അനുഭവത്തിൽ ചെലുത്തുന്ന വ്യക്തമായ സ്വാധീനം

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

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

ഫംഗ്ഷണൽ കോമ്പോണന്റുകളുടെ ഇൻപുട്ട് പ്രോപ്പുകൾ മാറിയിട്ടില്ലാത്തപ്പോൾ, അവയുടെ അനാവശ്യ റീ-റെൻഡറുകളുടെ ഈ വ്യാപകമായ പ്രശ്നം പരിഹരിക്കാനും ഫലപ്രദമായി നേരിടാനുമാണ് React.memo രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത്.

React.memo പരിചയപ്പെടുത്തുന്നു: കോമ്പോണന്റ് മെമ്മോയിസേഷന്റെ പ്രധാന ആശയം

React.memo റിയാക്ട് ലൈബ്രറി നേരിട്ട് നൽകുന്ന ഒരു ഹയർ-ഓർഡർ കോമ്പോണന്റായി (HOC) മനോഹരമായി രൂപകൽപ്പന ചെയ്തിരിക്കുന്നു. അതിന്റെ അടിസ്ഥാനപരമായ സംവിധാനം ഒരു ഫംഗ്ഷണൽ കോമ്പോണന്റിന്റെ അവസാനത്തെ റെൻഡർ ചെയ്ത ഔട്ട്പുട്ട് "മെമ്മോയിസ്" (അല്ലെങ്കിൽ കാഷെ) ചെയ്യുന്നതിനെ ചുറ്റിപ്പറ്റിയാണ്. തന്മൂലം, അതിന്റെ ഇൻപുട്ട് പ്രോപ്പുകളിൽ ഒരു ഷാലോ മാറ്റം സംഭവിച്ചാൽ മാത്രം അത് ആ കോമ്പോണന്റിന്റെ റീ-റെൻഡർ ക്രമീകരിക്കുന്നു. മുൻപത്തെ റെൻഡർ സൈക്കിളിൽ ലഭിച്ച പ്രോപ്പുകളുമായി പ്രോപ്പുകൾ സമാനമാണെങ്കിൽ, React.memo ബുദ്ധിപരമായി മുമ്പ് റെൻഡർ ചെയ്ത ഫലം പുനരുപയോഗിക്കുന്നു, അതുവഴി പലപ്പോഴും വിഭവങ്ങൾ-തീവ്രമായ റീ-റെൻഡർ പ്രക്രിയയെ പൂർണ്ണമായും ഒഴിവാക്കുന്നു.

React.memo എങ്ങനെ പ്രവർത്തിക്കുന്നു: ഷാലോ കംപാരിസന്റെ സൂക്ഷ്മത

നിങ്ങൾ ഒരു ഫംഗ്ഷണൽ കോമ്പോണന്റിനെ React.memo-യിൽ ഉൾക്കൊള്ളിക്കുമ്പോൾ, റിയാക്ട് അതിന്റെ പ്രോപ്പുകളുടെ സൂക്ഷ്മമായി നിർവചിക്കപ്പെട്ട ഒരു ഷാലോ കംപാരിസൻ നടത്തുന്നു. ഒരു ഷാലോ കംപാരിസൻ താഴെ പറയുന്ന നിയമങ്ങൾക്ക് കീഴിൽ പ്രവർത്തിക്കുന്നു:

• പ്രിമിറ്റീവ് മൂല്യങ്ങൾക്ക്: ഇതിൽ നമ്പറുകൾ, സ്ട്രിംഗുകൾ, ബൂളിയനുകൾ, null, undefined, സിംബലുകൾ, ബിഗ്ഇന്റുകൾ തുടങ്ങിയ ഡാറ്റാ ടൈപ്പുകൾ ഉൾപ്പെടുന്നു. ഈ ടൈപ്പുകൾക്ക്, React.memo ഒരു സ്ട്രിക്റ്റ് ഇക്വാലിറ്റി ചെക്ക് (===) നടത്തുന്നു. prevProp === nextProp ആണെങ്കിൽ, അവ തുല്യമായി കണക്കാക്കപ്പെടുന്നു.
• നോൺ-പ്രിമിറ്റീവ് മൂല്യങ്ങൾക്ക്: ഈ വിഭാഗത്തിൽ ഒബ്ജക്റ്റുകൾ, അറേകൾ, ഫംഗ്ഷനുകൾ എന്നിവ ഉൾപ്പെടുന്നു. ഇവയ്ക്ക്, React.memo ഈ മൂല്യങ്ങളിലേക്കുള്ള റഫറൻസുകൾ സമാനമാണോ എന്ന് സൂക്ഷ്മമായി പരിശോധിക്കുന്നു. ഇത് ഒബ്ജക്റ്റുകളുടെയോ അറേകളുടെയോ ആന്തരിക ഉള്ളടക്കങ്ങളുടെയോ ഘടനകളുടെയോ ഒരു ഡീപ് കംപാരിസൻ നടത്തുന്നില്ല എന്നത് മനസ്സിലാക്കേണ്ടത് നിർണായകമാണ്. ഒരു പുതിയ ഒബ്ജക്റ്റോ അറേയോ (ഒരേ ഉള്ളടക്കത്തോടെയാണെങ്കിൽ പോലും) ഒരു പ്രോപ്പായി നൽകുകയാണെങ്കിൽ, അതിന്റെ റഫറൻസ് വ്യത്യസ്തമായിരിക്കും, React.memo ഒരു മാറ്റം കണ്ടെത്തുകയും ഒരു റീ-റെൻഡർ ട്രിഗർ ചെയ്യുകയും ചെയ്യും.

ഒരു പ്രായോഗിക കോഡ് ഉദാഹരണത്തിലൂടെ ഇത് കൂടുതൽ വ്യക്തമാക്കാം:

            import React from 'react';

// A functional component that logs its re-renders
const MyPureComponent = ({ value, onClick }) => {
  console.log('MyPureComponent re-rendered'); // This log helps visualize re-renders
  return (
    <div style={{ padding: '10px', border: '1px solid #ccc', marginBottom: '10px' }}>
      <h4>Memoized Child Component</h4>
      <p>Current Value from Parent: <strong>{value}</strong></p>
      <button onClick={onClick} style={{ padding: '8px 15px', background: '#007bff', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
        Increment Value (via Child's Click)
      </button>
    </div>
  );
};

// Memoize the component for performance optimization
const MemoizedMyPureComponent = React.memo(MyPureComponent);

const ParentComponent = () => {
  const [count, setCount] = React.useState(0);
  const [otherState, setOtherState] = React.useState(0); // State not passed to child

  // Using useCallback to memoize the onClick handler
  const handleClick = React.useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []); // Empty dependency array ensures this function reference is stable

  console.log('ParentComponent re-rendered');

  return (
    <div style={{ border: '2px solid #000', padding: '20px', backgroundColor: '#f9f9f9' }}>
      <h2>Parent Component</h2>
      <p>Parent's Internal Count: <strong>{count}</strong></p>
      <p>Parent's Other State: <strong>{otherState}</strong></p>
      <button onClick={() => setOtherState(otherState + 1)} style={{ padding: '8px 15px', background: '#28a745', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer', marginRight: '10px' }}>
        Update Other State (Parent Only)
      </button>
      <button onClick={() => setCount(count + 1)} style={{ padding: '8px 15px', background: '#dc3545', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
        Update Count (Parent Only)
      </button>
      
      <hr style={{ margin: '20px 0' }} />
      
      <MemoizedMyPureComponent value={count} onClick={handleClick} />
    </div>
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, `ParentComponent`-നുള്ളിൽ `setOtherState` വിളിക്കുമ്പോൾ, `ParentComponent` മാത്രം ഒരു റീ-റെൻഡർ ആരംഭിക്കും. നിർണ്ണായകമായി, `MemoizedMyPureComponent` റീ-റെൻഡർ ചെയ്യില്ല. കാരണം അതിന്റെ `value` പ്രോപ്പ് (അതായത് `count`) അതിന്റെ പ്രിമിറ്റീവ് മൂല്യം മാറ്റിയിട്ടില്ല, കൂടാതെ അതിന്റെ `onClick` പ്രോപ്പ് (`handleClick` ഫംഗ്ഷൻ) `React.useCallback` ഹുക്ക് കാരണം ഒരേ റഫറൻസ് നിലനിർത്തി. തൽഫലമായി, `MyPureComponent`-നുള്ളിലെ `console.log('MyPureComponent re-rendered')` സ്റ്റേറ്റ്മെന്റ് `count` പ്രോപ്പ് യഥാർത്ഥത്തിൽ മാറുമ്പോൾ മാത്രമേ പ്രവർത്തിക്കൂ, ഇത് മെമ്മോയിസേഷന്റെ കാര്യക്ഷമത പ്രകടമാക്കുന്നു.

React.memo എപ്പോൾ ഉപയോഗിക്കണം: പരമാവധി പ്രയോജനത്തിനുള്ള തന്ത്രപരമായ ഒപ്റ്റിമൈസേഷൻ

React.memo പ്രകടന മെച്ചപ്പെടുത്തലിനുള്ള ഒരു ശക്തമായ ഉപകരണത്തെ പ്രതിനിധീകരിക്കുന്നുണ്ടെങ്കിലും, ഇത് എല്ലാ കോമ്പോണന്റുകളിലും വിവേചനരഹിതമായി പ്രയോഗിക്കേണ്ട ഒരു സർവരോഗസംഹാരിയല്ലെന്ന് ഊന്നിപ്പറയേണ്ടത് അത്യാവശ്യമാണ്. അശ്രദ്ധമായോ അമിതമായോ `React.memo` പ്രയോഗിക്കുന്നത്, താരതമ്യ പരിശോധനകൾ കാരണം തന്നെ, വിരോധാഭാസമെന്നു പറയട്ടെ, അനാവശ്യമായ സങ്കീർണ്ണതയും പ്രകടന ഓവർഹെഡും ഉണ്ടാക്കിയേക്കാം. വിജയകരമായ ഒപ്റ്റിമൈസേഷന്റെ താക്കോൽ അതിന്റെ തന്ത്രപരവും ലക്ഷ്യം വെച്ചുള്ളതുമായ വിന്യാസത്തിലാണ്. താഴെ പറയുന്ന വ്യക്തമായി നിർവചിക്കപ്പെട്ട സാഹചര്യങ്ങളിൽ React.memo വിവേകപൂർവ്വം ഉപയോഗിക്കുക:

1. ഒരേ പ്രോപ്പുകൾക്ക് ഒരേ ഔട്ട്പുട്ട് റെൻഡർ ചെയ്യുന്ന കോമ്പോണന്റുകൾ (പ്യുവർ കോമ്പോണന്റുകൾ)

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

            // Example: A list item component displaying user data
const UserListItem = React.memo(({ user }) => {
  console.log(`Rendering User: ${user.name}`); // Observe re-renders
  return (
    <li style={{ padding: '8px', borderBottom: '1px dashed #eee', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
      <span><strong>{user.name}</strong> ({user.id})</span>
      <em>{user.email}</em>
    </li>
  );
});

const UserList = ({ users }) => {
  console.log('UserList re-rendered');
  return (
    <ul style={{ listStyle: 'none', padding: '0', border: '1px solid #ddd', borderRadius: '4px', margin: '20px 0' }}>
      {users.map(user => (
        <UserListItem key={user.id} user={user} />
      ))}
    </ul>
  );
};

// In a parent component, if the 'users' array reference itself remains unchanged,
// and individual 'user' objects within that array also maintain their references
// (i.e., they are not replaced by new objects with the same data), then UserListItem
// components will not re-render. If a new user object is added to the array (creating a new reference),
// or an existing user's ID or any other attribute causes its object reference to change,
// then only the affected UserListItem will selectively re-render, leveraging React's efficient diffing algorithm.

            

              
                Copy
              
            
          

2. ഉയർന്ന റെൻഡറിംഗ് ചെലവുള്ള കോമ്പോണന്റുകൾ (കമ്പ്യൂട്ടേഷണലായി തീവ്രമായ റെൻഡറുകൾ)

ഒരു കോമ്പോണന്റിന്റെ റെൻഡർ രീതിയിൽ സങ്കീർണ്ണവും വിഭവ-തീവ്രവുമായ കണക്കുകൂട്ടലുകൾ, വിപുലമായ DOM മാനിപ്പുലേഷനുകൾ, അല്ലെങ്കിൽ ഗണ്യമായ എണ്ണം നെസ്റ്റഡ് ചൈൽഡ് കോമ്പോണന്റുകളുടെ റെൻഡറിംഗ് എന്നിവ ഉൾപ്പെടുന്നുവെങ്കിൽ, അത് മെമ്മോയിസ് ചെയ്യുന്നത് വളരെ ഗണ്യമായ പ്രകടന നേട്ടങ്ങൾ നൽകും. അത്തരം കോമ്പോണന്റുകൾ അവയുടെ റെൻഡറിംഗ് സൈക്കിളിൽ ഗണ്യമായ സിപിയു സമയം ഉപയോഗിക്കാറുണ്ട്. മാതൃകാപരമായ സാഹചര്യങ്ങൾ ഉൾപ്പെടുന്നു:

• വലിയ, ഇന്ററാക്ടീവ് ഡാറ്റാ ടേബിളുകൾ: പ്രത്യേകിച്ചും ധാരാളം വരികളും കോളങ്ങളും, സങ്കീർണ്ണമായ സെൽ ഫോർമാറ്റിംഗ്, അല്ലെങ്കിൽ ഇൻലൈൻ എഡിറ്റിംഗ് കഴിവുകളുള്ളവ.
• സങ്കീർണ്ണമായ ചാർട്ടുകൾ അല്ലെങ്കിൽ ഗ്രാഫിക്കൽ പ്രാതിനിധ്യങ്ങൾ: D3.js, Chart.js, അല്ലെങ്കിൽ സങ്കീർണ്ണമായ ഡാറ്റാ വിഷ്വലൈസേഷനുകൾക്കായി കാൻവാസ് അടിസ്ഥാനമാക്കിയുള്ള റെൻഡറിംഗ് ഉപയോഗിക്കുന്ന ആപ്ലിക്കേഷനുകൾ.
• വലിയ ഡാറ്റാസെറ്റുകൾ പ്രോസസ്സ് ചെയ്യുന്ന കോമ്പോണന്റുകൾ: അവയുടെ വിഷ്വൽ ഔട്ട്പുട്ട് സൃഷ്ടിക്കുന്നതിനായി വലിയ ഡാറ്റാ അറേകളിൽ ആവർത്തിക്കുന്ന കോമ്പോണന്റുകൾ, ഇതിൽ മാപ്പിംഗ്, ഫിൽട്ടറിംഗ്, അല്ലെങ്കിൽ സോർട്ടിംഗ് പ്രവർത്തനങ്ങൾ ഉൾപ്പെട്ടേക്കാം.
• ബാഹ്യ ഉറവിടങ്ങൾ ലോഡ് ചെയ്യുന്ന കോമ്പോണന്റുകൾ: ഇത് നേരിട്ടുള്ള റെൻഡർ ചെലവല്ലെങ്കിലും, അവയുടെ റെൻഡർ ഔട്ട്പുട്ട് ഇടയ്ക്കിടെ മാറുന്ന ലോഡിംഗ് സ്റ്റേറ്റുകളുമായി ബന്ധിപ്പിച്ചിട്ടുണ്ടെങ്കിൽ, ലോഡ് ചെയ്ത ഉള്ളടക്കത്തിന്റെ ഡിസ്പ്ലേ മെമ്മോയിസ് ചെയ്യുന്നത് മിന്നുന്നത് തടയാൻ സഹായിക്കും.

3. പാരന്റ് സ്റ്റേറ്റ് മാറ്റങ്ങൾ കാരണം പതിവായി റീ-റെൻഡർ ചെയ്യുന്ന കോമ്പോണന്റുകൾ

റിയാക്ട് ആപ്ലിക്കേഷനുകളിൽ ഒരു പാരന്റ് കോമ്പോണന്റിന്റെ സ്റ്റേറ്റ് അപ്‌ഡേറ്റുകൾ അതിന്റെ എല്ലാ ചിൽഡ്രന്റെയും റീ-റെൻഡറുകൾക്ക് അശ്രദ്ധമായി കാരണമാകുന്നത് ഒരു സാധാരണ പാറ്റേണാണ്, ആ ചിൽഡ്രന്റെ പ്രത്യേക പ്രോപ്പുകൾ പ്രവർത്തനപരമായി മാറിയിട്ടില്ലെങ്കിൽ പോലും. ഒരു ചൈൽഡ് കോമ്പോണന്റ് അതിന്റെ ഉള്ളടക്കത്തിൽ താരതമ്യേന സ്റ്റാറ്റിക് ആണെങ്കിലും അതിന്റെ പാരന്റ് പതിവായി അതിന്റെ സ്വന്തം ആന്തരിക സ്റ്റേറ്റ് അപ്‌ഡേറ്റ് ചെയ്യുകയും അതുവഴി ഒരു കാസ്കേഡിന് കാരണമാവുകയും ചെയ്യുന്നുവെങ്കിൽ, React.memo-ക്ക് ഈ അനാവശ്യമായ, ടോപ്പ്-ഡൗൺ റീ-റെൻഡറുകളെ ഫലപ്രദമായി തടസ്സപ്പെടുത്താനും തടയാനും കഴിയും, ഇത് പ്രചാരണത്തിന്റെ ശൃംഖലയെ തകർക്കുന്നു.

React.memo എപ്പോൾ ഉപയോഗിക്കരുത്: അനാവശ്യ സങ്കീർണ്ണതയും ഓവർഹെഡും ഒഴിവാക്കൽ

React.memo എപ്പോൾ തന്ത്രപരമായി വിന്യസിക്കണമെന്ന് മനസ്സിലാക്കുന്നതുപോലെ തന്നെ നിർണായകമാണ് അതിന്റെ പ്രയോഗം അനാവശ്യമോ, അതിലും മോശമായി, ദോഷകരമോ ആയ സാഹചര്യങ്ങൾ തിരിച്ചറിയുന്നത്. ശ്രദ്ധാപൂർവ്വമായ പരിഗണനയില്ലാതെ React.memo പ്രയോഗിക്കുന്നത് അനാവശ്യമായ സങ്കീർണ്ണത, ഡീബഗ്ഗിംഗ് പാതകൾ മറയ്ക്കുക, കൂടാതെ ഏതൊരു പ്രയോജനത്തെയും ഇല്ലാതാക്കുന്ന ഒരു പ്രകടന ഓവർഹെഡ് പോലും ചേർത്തേക്കാം.

1. അപൂർവ്വമായി റെൻഡർ ചെയ്യുന്ന കോമ്പോണന്റുകൾ

ഒരു കോമ്പോണന്റ് അപൂർവ്വമായി മാത്രം റീ-റെൻഡർ ചെയ്യാൻ രൂപകൽപ്പന ചെയ്തിട്ടുള്ളതാണെങ്കിൽ (ഉദാഹരണത്തിന്, പ്രാരംഭ മൗണ്ടിംഗിൽ ഒരിക്കൽ, ഒരുപക്ഷേ അതിന്റെ ഡിസ്‌പ്ലേയെ യഥാർത്ഥത്തിൽ സ്വാധീനിക്കുന്ന ഒരു ഗ്ലോബൽ സ്റ്റേറ്റ് മാറ്റം കാരണം ഒരു തവണ കൂടി), React.memo നടത്തുന്ന പ്രോപ്പ് താരതമ്യത്തിന്റെ നാമമാത്രമായ ഓവർഹെഡ് ഒരു റെൻഡർ ഒഴിവാക്കുന്നതിലൂടെയുള്ള ഏതൊരു സാധ്യതയുള്ള ലാഭത്തെയും എളുപ്പത്തിൽ മറികടന്നേക്കാം. ഒരു ഷാലോ താരതമ്യത്തിന്റെ ചെലവ് കുറവാണെങ്കിലും, ഇതിനകം റെൻഡർ ചെയ്യാൻ ചിലവുകുറഞ്ഞ ഒരു കോമ്പോണന്റിൽ ഏതെങ്കിലും ഓവർഹെഡ് പ്രയോഗിക്കുന്നത് അടിസ്ഥാനപരമായി വിപരീതഫലമുണ്ടാക്കും.

2. പതിവായി മാറുന്ന പ്രോപ്പുകളുള്ള കോമ്പോണന്റുകൾ

ഒരു കോമ്പോണന്റിന്റെ പ്രോപ്പുകൾ സഹജമായി ചലനാത്മകവും അതിന്റെ പാരന്റ് കോമ്പോണന്റ് റീ-റെൻഡർ ചെയ്യുമ്പോഴെല്ലാം മാറുന്നതുമാണെങ്കിൽ (ഉദാഹരണത്തിന്, വേഗത്തിൽ അപ്‌ഡേറ്റ് ചെയ്യുന്ന ഒരു ആനിമേഷൻ ഫ്രെയിമുമായി നേരിട്ട് ബന്ധിപ്പിച്ച ഒരു പ്രോപ്പ്, ഒരു തത്സമയ ഫിനാൻഷ്യൽ ടിക്കർ, അല്ലെങ്കിൽ ഒരു ലൈവ് ഡാറ്റാ സ്ട്രീം), അപ്പോൾ React.memo ഈ പ്രോപ്പ് മാറ്റങ്ങളെ സ്ഥിരമായി കണ്ടെത്തുകയും തൽഫലമായി ഒരു റീ-റെൻഡർ ട്രിഗർ ചെയ്യുകയും ചെയ്യും. അത്തരം സാഹചര്യങ്ങളിൽ, React.memo റാപ്പർ റെൻഡറുകൾ ഒഴിവാക്കുന്നതിൽ യഥാർത്ഥ പ്രയോജനമൊന്നും നൽകാതെ താരതമ്യ ലോജിക്കിന്റെ ഓവർഹെഡ് മാത്രം ചേർക്കുന്നു.

3. പ്രിമിറ്റീവ് പ്രോപ്പുകൾ മാത്രമുള്ളതും സങ്കീർണ്ണമായ ചിൽഡ്രൻ ഇല്ലാത്തതുമായ കോമ്പോണന്റുകൾ

ഒരു ഫംഗ്ഷണൽ കോമ്പോണന്റ് പ്രിമിറ്റീവ് ഡാറ്റാ ടൈപ്പുകൾ (നമ്പറുകൾ, സ്ട്രിംഗുകൾ, അല്ലെങ്കിൽ ബൂളിയനുകൾ പോലുള്ളവ) മാത്രമാണ് പ്രോപ്പുകളായി സ്വീകരിക്കുന്നതെങ്കിൽ, കൂടാതെ ചിൽഡ്രൻ ഒന്നും റെൻഡർ ചെയ്യുന്നില്ലെങ്കിൽ (അല്ലെങ്കിൽ സ്വയം റാപ്പ് ചെയ്യാത്ത വളരെ ലളിതവും സ്റ്റാറ്റിക് ആയതുമായ ചിൽഡ്രൻ മാത്രം), അതിന്റെ ആന്തരിക റെൻഡറിംഗ് ചെലവ് വളരെ തുച്ഛമായിരിക്കാൻ സാധ്യതയുണ്ട്. ഈ സന്ദർഭങ്ങളിൽ, മെമ്മോയിസേഷനിൽ നിന്ന് ലഭിക്കുന്ന പ്രകടന പ്രയോജനം തിരിച്ചറിയാൻ കഴിയില്ല, കൂടാതെ React.memo റാപ്പർ ഒഴിവാക്കി കോഡ് ലാളിത്യത്തിന് മുൻഗണന നൽകുന്നത് സാധാരണയായി ഉചിതമാണ്.

4. പ്രോപ്പുകളായി സ്ഥിരമായി പുതിയ ഒബ്ജക്റ്റ്/അറേ/ഫംഗ്ഷൻ റഫറൻസുകൾ ലഭിക്കുന്ന കോമ്പോണന്റുകൾ

ഇത് React.memo-യുടെ ഷാലോ കംപാരിസൻ സംവിധാനവുമായി നേരിട്ട് ബന്ധപ്പെട്ട ഒരു നിർണ്ണായകവും പതിവായി നേരിടുന്നതുമായ ഒരു പ്രശ്നത്തെ പ്രതിനിധീകരിക്കുന്നു. നിങ്ങളുടെ കോമ്പോണന്റ് ഓരോ പാരന്റ് കോമ്പോണന്റ് റീ-റെൻഡറിലും പൂർണ്ണമായും പുതിയ ഇൻസ്റ്റൻസുകളായി അശ്രദ്ധമായി അല്ലെങ്കിൽ രൂപകൽപ്പന പ്രകാരം ഇൻസ്റ്റാന്റേറ്റുചെയ്യുന്ന നോൺ-പ്രിമിറ്റീവ് പ്രോപ്പുകൾ (ഒബ്ജക്റ്റുകൾ, അറേകൾ, അല്ലെങ്കിൽ ഫംഗ്ഷനുകൾ പോലുള്ളവ) സ്വീകരിക്കുന്നുണ്ടെങ്കിൽ, അവയുടെ അടിസ്ഥാന ഉള്ളടക്കം അർത്ഥപരമായി സമാനമാണെങ്കിൽ പോലും, React.memo ഈ പ്രോപ്പുകൾ മാറിയതായി നിരന്തരം മനസ്സിലാക്കും. അത്തരം വ്യാപകമായ സാഹചര്യങ്ങളിൽ, റെൻഡറുകളിലുടനീളം സ്ഥിരവും സുസ്ഥിരവുമായ പ്രോപ്പ് റഫറൻസുകൾ ഉറപ്പാക്കാൻ React.memo-യുമായി ചേർന്ന് `React.useCallback`, `React.useMemo` എന്നിവയുടെ ഉപയോഗം ഫലപ്രദമായ പരിഹാരത്തിന് ആവശ്യമാണ്.

റഫറൻസ് ഇക്വാലിറ്റി പ്രശ്നങ്ങൾ മറികടക്കുന്നു: `useCallback`, `useMemo` എന്നിവയുടെ അനിവാര്യമായ പങ്കാളിത്തം

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

പ്രോപ്പുകളായി നൽകുന്ന ഫംഗ്ഷനുകളിലെ വ്യാപകമായ പ്രശ്നം

            const ParentWithProblem = () => {
  const [count, setCount] = React.useState(0);

  // PROBLEM: This 'increment' function is re-created as a brand new object
  // on every single render of ParentWithProblem. Its reference changes.
  const increment = () => {
    setCount(prevCount => prevCount + 1);
  };

  console.log('ParentWithProblem re-rendered');

  return (
    <div style={{ border: '1px solid red', padding: '15px', marginBottom: '15px' }}>
      <h3>Parent with Function Reference Problem</h3>
      <p>Count: <strong>{count}</strong></p>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>Update Parent Count Directly</button>
      <MemoizedChildComponent onClick={increment} />
    </div>
  );
};

const MemoizedChildComponent = React.memo(({ onClick }) => {
  // This log will fire unnecessarily because 'onClick' reference keeps changing
  console.log('MemoizedChildComponent re-rendered due to new onClick ref');
  return (
    <div style={{ border: '1px solid blue', padding: '10px', marginTop: '10px' }}>
      <p>Child Component</p>
      <button onClick={onClick}>Click Me (Child's Button)</button>
    </div>
  );
});

            

              
                Copy
              
            
          

മുകളിൽ പറഞ്ഞ ഉദാഹരണത്തിൽ, `MemoizedChildComponent` നിർഭാഗ്യവശാൽ `ParentWithProblem` റീ-റെൻഡർ ചെയ്യുമ്പോഴെല്ലാം റീ-റെൻഡർ ചെയ്യും, `count` സ്റ്റേറ്റ് (അല്ലെങ്കിൽ അത് സ്വീകരിക്കുന്ന മറ്റേതെങ്കിലും പ്രോപ്പ്) അടിസ്ഥാനപരമായി മാറിയിട്ടില്ലെങ്കിൽ പോലും. ഈ അഭികാമ്യമല്ലാത്ത സ്വഭാവം സംഭവിക്കുന്നത് `increment` ഫംഗ്ഷൻ `ParentWithProblem` കോമ്പോണന്റിനുള്ളിൽ ഇൻലൈനായി നിർവചിച്ചിരിക്കുന്നതുകൊണ്ടാണ്. ഇതിനർത്ഥം, ഓരോ റെൻഡർ സൈക്കിളിലും ഒരു പുതിയ ഫംഗ്ഷൻ ഒബ്ജക്റ്റ്, ഒരു വ്യത്യസ്ത മെമ്മറി റഫറൻസോടെ, സൃഷ്ടിക്കപ്പെടുന്നു എന്നാണ്. `React.memo` അതിന്റെ ഷാലോ കംപാരിസൻ നടത്തുമ്പോൾ, `onClick` പ്രോപ്പിനായി ഈ പുതിയ ഫംഗ്ഷൻ റഫറൻസ് കണ്ടെത്തുകയും, അതിന്റെ കാഴ്ചപ്പാടിൽ ശരിയായി, പ്രോപ്പ് മാറിയെന്ന് നിഗമനം ചെയ്യുകയും, അങ്ങനെ കുട്ടിയുടെ അനാവശ്യ റീ-റെൻഡർ ട്രിഗർ ചെയ്യുകയും ചെയ്യുന്നു.

കൃത്യമായ പരിഹാരം: ഫംഗ്ഷനുകൾ മെമ്മോയിസ് ചെയ്യാൻ `useCallback`

React.useCallback ഫംഗ്ഷനുകൾ മെമ്മോയിസ് ചെയ്യാൻ പ്രത്യേകം രൂപകൽപ്പന ചെയ്ത ഒരു അടിസ്ഥാന റിയാക്ട് ഹുക്ക് ആണ്. ഇത് കോൾബാക്ക് ഫംഗ്ഷന്റെ ഒരു മെമ്മോയിസ്ഡ് പതിപ്പ് ഫലപ്രദമായി നൽകുന്നു. ഈ മെമ്മോയിസ്ഡ് ഫംഗ്ഷൻ ഇൻസ്റ്റൻസ് അതിന്റെ ഡിപൻഡൻസി അറേയിൽ വ്യക്തമാക്കിയ ഡിപൻഡൻസികളിലൊന്ന് മാറിയാൽ മാത്രമേ മാറുകയുള്ളൂ (അതായത്, ഒരു പുതിയ ഫംഗ്ഷൻ റഫറൻസ് സൃഷ്ടിക്കപ്പെടും). ഇത് ചൈൽഡ് കോമ്പോണന്റുകൾക്ക് ഒരു സ്ഥിരമായ ഫംഗ്ഷൻ റഫറൻസ് ഉറപ്പാക്കുന്നു.

            const ParentWithSolution = () => {
  const [count, setCount] = React.useState(0);

  // SOLUTION: Memoize the 'increment' function using useCallback.
  // With an empty dependency array ([]), 'increment' is created only once on mount.
  const increment = React.useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []); 

  // Example with dependency: if `count` was explicitly needed inside increment (less common with setCount(prev...))
  // const incrementWithDep = React.useCallback(() => {
  //   console.log('Current count from closure:', count);
  //   setCount(count + 1);
  // }, [count]); // This function re-creates only when 'count' changes its primitive value

  console.log('ParentWithSolution re-rendered');

  return (
    <div style={{ border: '1px solid green', padding: '15px', marginBottom: '15px' }}>
      <h3>Parent with Function Reference Solution</h3>
      <p>Count: <strong>{count}</strong></p>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>Update Parent Count Directly</button>
      <MemoizedChildComponent onClick={increment} />
    </div>
  );
};

// MemoizedChildComponent from previous example still applies.
// Now, it will only re-render if 'count' actually changes or other props it receives change.

            

              
                Copy
              
            
          

ഈ നടപ്പാക്കലിലൂടെ, `MemoizedChildComponent` ഇപ്പോൾ അതിന്റെ `value` പ്രോപ്പ് (അല്ലെങ്കിൽ അത് സ്വീകരിക്കുന്ന മറ്റേതെങ്കിലും പ്രോപ്പ് അതിന്റെ പ്രിമിറ്റീവ് മൂല്യമോ സ്ഥിരമായ റഫറൻസോ യഥാർത്ഥത്തിൽ മാറ്റിയാൽ) `ParentWithSolution`-നെ റീ-റെൻഡർ ചെയ്യാൻ കാരണമാവുകയും, തുടർന്ന് `increment` ഫംഗ്ഷൻ വീണ്ടും സൃഷ്ടിക്കാൻ കാരണമാവുകയും ചെയ്താൽ മാത്രമേ റീ-റെൻഡർ ചെയ്യുകയുള്ളൂ (ഒരു ശൂന്യമായ ഡിപൻഡൻസി അറേ `[]` ഉപയോഗിച്ച്, ഇത് പ്രാരംഭ മൗണ്ടിംഗിന് ശേഷം ഫലപ്രദമായി ഒരിക്കലും സംഭവിക്കില്ല). സ്റ്റേറ്റിനെയോ പ്രോപ്പുകളെയോ ആശ്രയിക്കുന്ന ഫംഗ്ഷനുകൾക്ക് (`incrementWithDep` ഉദാഹരണം), ആ നിർദ്ദിഷ്ട ഡിപൻഡൻസികൾ മാറുമ്പോൾ മാത്രമേ അവ വീണ്ടും സൃഷ്ടിക്കപ്പെടുകയുള്ളൂ, ഇത് മിക്ക സമയത്തും മെമ്മോയിസേഷൻ പ്രയോജനങ്ങൾ സംരക്ഷിക്കുന്നു.

പ്രോപ്പുകളായി കൈമാറുന്ന ഒബ്ജക്റ്റുകളും അറേകളും നേരിടുന്ന വെല്ലുവിളി

            const ParentWithObjectProblem = () => {
  const [data, setData] = React.useState({ id: 1, name: 'Alice' });

  // PROBLEM: This 'config' object is re-created on every render.
  // Its reference changes, even if its content is identical.
  const config = { type: 'user', isActive: true, permissions: ['read', 'write'] };

  console.log('ParentWithObjectProblem re-rendered');

  return (
    <div style={{ border: '1px solid orange', padding: '15px', marginBottom: '15px' }}>
      <h3>Parent with Object Reference Problem</h3>
      <button onClick={() => setData(prevData => ({ ...prevData, name: 'Bob' }))}>Change Data Name</button>
      <MemoizedDisplayComponent item={data} settings={config} />
    </div>
  );
};

const MemoizedDisplayComponent = React.memo(({ item, settings }) => {
  // This log will fire unnecessarily because 'settings' object reference keeps changing
  console.log('MemoizedDisplayComponent re-rendered due to new object ref');
  return (
    <div style={{ border: '1px solid purple', padding: '10px', marginTop: '10px' }}>
      <p>Displaying Item: <strong>{item.name}</strong> (ID: {item.id})</p>
      <p>Settings: Type: {settings.type}, Active: {settings.isActive.toString()}, Permissions: {settings.permissions.join(', ')}</p>
    </div>
  );
});

            

              
                Copy
              
            
          

ഫംഗ്ഷനുകളുമായുള്ള പ്രശ്നത്തിന് സമാനമായി, ഈ സാഹചര്യത്തിലെ `config` ഒബ്ജക്റ്റ് `ParentWithObjectProblem`-ന്റെ ഓരോ റെൻഡറിലും സൃഷ്ടിക്കപ്പെടുന്ന ഒരു പുതിയ ഇൻസ്റ്റൻസാണ്. തൽഫലമായി, `MemoizedDisplayComponent` അഭികാമ്യമല്ലാത്ത രീതിയിൽ റീ-റെൻഡർ ചെയ്യും, കാരണം `React.memo` `settings` പ്രോപ്പിന്റെ റഫറൻസ് തുടർച്ചയായി മാറിക്കൊണ്ടിരിക്കുകയാണെന്ന് മനസ്സിലാക്കുന്നു, അതിന്റെ ആശയപരമായ ഉള്ളടക്കം സ്റ്റാറ്റിക് ആയി തുടരുമ്പോഴും.

മികച്ച പരിഹാരം: ഒബ്ജക്റ്റുകളും അറേകളും മെമ്മോയിസ് ചെയ്യാൻ `useMemo`

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

const ParentWithObjectSolution = () => {
  const [data, setData] = React.useState({ id: 1, name: 'Alice' });
  const [theme, setTheme] = React.useState('light');

  // SOLUTION 1: Memoize a static object using useMemo with an empty dependency array
  const staticConfig = React.useMemo(() => ({
    type: 'user',
    isActive: true,
  }), []); // This object reference is stable across renders

  // SOLUTION 2: Memoize an object that depends on state, re-computing only when 'theme' changes
  const dynamicSettings = React.useMemo(() => ({
    displayTheme: theme,
    notificationsEnabled: true,
  }), [theme]); // This object reference changes only when 'theme' changes

  // Example of memoizing a derived array
  const processedItems = React.useMemo(() => {
    // Imagine heavy processing here, e.g., filtering a large list
    return data.id % 2 === 0 ? ['even', 'processed'] : ['odd', 'processed'];
  }, [data.id]); // Re-compute only if data.id changes

  console.log('ParentWithObjectSolution re-rendered');

  return (
    <div style={{ border: '1px solid blue', padding: '15px', marginBottom: '15px' }}>
      <h3>Parent with Object Reference Solution</h3>
      <button onClick={() => setData(prevData => ({ ...prevData, id: prevData.id + 1 }))}>Change Data ID</button>
      <button onClick={() => setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'))}>Toggle Theme</button>
      <MemoizedDisplayComponent item={data} settings={staticConfig} dynamicSettings={dynamicSettings} processedItems={processedItems} />
    </div>
  );
};

const MemoizedDisplayComponent = React.memo(({ item, settings, dynamicSettings, processedItems }) => {
  console.log('MemoizedDisplayComponent re-rendered'); // This will now log only when relevant props actually change
  return (
    <div style={{ border: '1px solid teal', padding: '10px', marginTop: '10px' }}>
      <p>Displaying Item: <strong>{item.name}</strong> (ID: {item.id})</p>
      <p>Static Settings: Type: {settings.type}, Active: {settings.isActive.toString()}</p>
      <p>Dynamic Settings: Theme: {dynamicSettings.displayTheme}, Notifications: {dynamicSettings.notificationsEnabled.toString()}</p>
      <p>Processed Items: {processedItems.join(', ')}</p>
    </div>
  );
});
```

const ComplexChartComponent = ({ dataPoints, options, onChartClick }) => {
  console.log('ComplexChartComponent re-rendered');
  // Imagine this component involves very expensive rendering logic, e.g., d3.js or canvas drawing
  return (
    <div style={{ border: '1px solid #c0ffee', padding: '20px', marginBottom: '20px' }}>
      <h4>Advanced Chart Display</h4>
      <p>Data Points Count: <strong>{dataPoints.length}</strong></p>
      <p>Chart Title: <strong>{options.title}</strong></p>
      <p>Zoom Level: <strong>{options.zoomLevel}</strong></p>
      <button onClick={onChartClick}>Interact with Chart</button>
    </div>
  );
};

// Custom comparison function for ComplexChartComponent
const areChartPropsEqual = (prevProps, nextProps) => {
  // 1. Compare 'dataPoints' array by reference (assuming it's memoized by parent or immutable)
  if (prevProps.dataPoints !== nextProps.dataPoints) return false;

  // 2. Compare 'onChartClick' function by reference (assuming it's memoized by parent via useCallback)
  if (prevProps.onChartClick !== nextProps.onChartClick) return false;

  // 3. Custom deep-ish comparison for 'options' object
  // We only care if 'title' or 'zoomLevel' in options change, 
  // ignoring other keys like 'debugMode' for re-render decision.
  const optionsChanged = (
    prevProps.options.title !== nextProps.options.title ||
    prevProps.options.zoomLevel !== nextProps.options.zoomLevel
  );

  // If optionsChanged is true, then props are NOT equal, so return false (re-render).
  // Otherwise, if all above checks passed, props are considered equal, so return true (don't re-render).
  return !optionsChanged;
};

const MemoizedComplexChartComponent = React.memo(ComplexChartComponent, areChartPropsEqual);

// Usage in a parent component:
const DashboardPage = () => {
  const [chartData, setChartData] = React.useState([
    { id: 1, value: 10 }, { id: 2, value: 20 }, { id: 3, value: 15 }
  ]);
  const [chartOptions, setChartOptions] = React.useState({
    title: 'Sales Performance',
    zoomLevel: 1,
    debugMode: false, // This prop change should NOT trigger re-render
    theme: 'light'
  });

  const handleChartInteraction = React.useCallback(() => {
    console.log('Chart interacted!');
    // Potentially update parent state, e.g., setChartData(...)
  }, []);

  return (
    <div style={{ border: '2px solid #555', padding: '25px', backgroundColor: '#f0f0f0' }}>
      <h3>Dashboard Analytics</h3>
      <button onClick={() => setChartOptions(prev => ({ ...prev, zoomLevel: prev.zoomLevel + 1 }))}
      style={{ marginRight: '10px' }}>
        Increase Zoom
      </button>
      <button onClick={() => setChartOptions(prev => ({ ...prev, debugMode: !prev.debugMode }))}
      style={{ marginRight: '10px' }}>
        Toggle Debug (No Re-render expected)
      </button>
      <button onClick={() => setChartOptions(prev => ({ ...prev, title: 'Revenue Overview' }))}
      >
        Change Chart Title
      </button>
      
      <MemoizedComplexChartComponent
        dataPoints={chartData}
        options={chartOptions}
        onChartClick={handleChartInteraction}
      />
    </div>
  );
};
```