റിയാക്ട് കമ്പോണന്റ് റെൻഡറിംഗ് ലളിതമായി മനസ്സിലാക്കാം: ഒരു ആഗോള കാഴ്ചപ്പാട്

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

റിയാക്ട് റെൻഡറിംഗിന്റെ കാതൽ: ഡിക്ലറേറ്റീവ് യുഐയും വെർച്വൽ ഡോമും (Virtual DOM)

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

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

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

കമ്പോണന്റ് റെൻഡറിംഗ് ലൈഫ് സൈക്കിൾ മനസ്സിലാക്കാം

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

മൗണ്ടിംഗ് (Mounting)

ഒരു കമ്പോണന്റ് നിർമ്മിക്കുകയും ആദ്യമായി ഡോമിലേക്ക് ചേർക്കുകയും ചെയ്യുന്ന ഘട്ടമാണ് മൗണ്ടിംഗ്. ക്ലാസ് കമ്പോണന്റുകളിൽ ഉൾപ്പെടുന്ന പ്രധാന മെത്തേഡുകൾ ഇവയാണ്:

• `constructor()`: ആദ്യം വിളിക്കപ്പെടുന്ന മെത്തേഡ്. സ്റ്റേറ്റ് ഇനീഷ്യലൈസ് ചെയ്യുന്നതിനും ഇവന്റ് ഹാൻഡ്‌ലറുകൾ ബൈൻഡ് ചെയ്യുന്നതിനും ഇത് ഉപയോഗിക്കുന്നു. സാധാരണയായി നിങ്ങളുടെ കമ്പോണന്റിനായുള്ള പ്രാരംഭ ഡാറ്റ ഇവിടെയാണ് സജ്ജീകരിക്കുന്നത്.
• `static getDerivedStateFromProps(props, state)`: `render()`-ന് മുമ്പ് വിളിക്കപ്പെടുന്നു. പ്രോപ്സിലെ മാറ്റങ്ങൾക്കനുസരിച്ച് സ്റ്റേറ്റ് അപ്‌ഡേറ്റ് ചെയ്യാൻ ഇത് ഉപയോഗിക്കുന്നു. എന്നിരുന്നാലും, സാധ്യമെങ്കിൽ ഇത് ഒഴിവാക്കാനും, പകരം നേരിട്ടുള്ള സ്റ്റേറ്റ് മാനേജ്‌മെന്റോ മറ്റ് ലൈഫ് സൈക്കിൾ മെത്തേഡുകളോ ഉപയോഗിക്കാനാണ് നിർദ്ദേശിക്കപ്പെടുന്നത്.
• `render()`: ആവശ്യമായ ഒരേയൊരു മെത്തേഡ്. യുഐ എങ്ങനെയായിരിക്കണമെന്ന് വിവരിക്കുന്ന JSX ഇത് റിട്ടേൺ ചെയ്യുന്നു.
• `componentDidMount()`: ഒരു കമ്പോണന്റ് മൗണ്ട് ചെയ്ത ഉടൻ (ഡോമിലേക്ക് ചേർത്ത ശേഷം) ഇത് വിളിക്കപ്പെടുന്നു. ഡാറ്റാ ഫെച്ചിംഗ്, സബ്സ്ക്രിപ്ഷനുകൾ സജ്ജീകരിക്കുക, അല്ലെങ്കിൽ ബ്രൗസറിന്റെ ഡോം എപിഐകളുമായി സംവദിക്കുക തുടങ്ങിയ സൈഡ് എഫക്റ്റുകൾ ചെയ്യാൻ ഏറ്റവും അനുയോജ്യമായ സ്ഥലമാണിത്. ഉദാഹരണത്തിന്, ഒരു ഗ്ലോബൽ എപിഐ എൻഡ്‌പോയിന്റിൽ നിന്ന് ഡാറ്റ ലഭ്യമാക്കുന്നത് സാധാരണയായി ഇവിടെയാണ് സംഭവിക്കുക.

ഹുക്ക്സ് ഉപയോഗിക്കുന്ന ഫങ്ഷണൽ കമ്പോണന്റുകളിൽ, `useEffect()` ഒരു ശൂന്യമായ ഡിപൻഡൻസി അറേ (`[]`) ഉപയോഗിച്ച് `componentDidMount()`-ന് സമാനമായ ഒരു ലക്ഷ്യം നിറവേറ്റുന്നു, ഇത് പ്രാരംഭ റെൻഡറിനും ഡോം അപ്‌ഡേറ്റുകൾക്കും ശേഷം കോഡ് എക്സിക്യൂട്ട് ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

അപ്‌ഡേറ്റിംഗ് (Updating)

ഒരു കമ്പോണന്റിന്റെ സ്റ്റേറ്റ് അല്ലെങ്കിൽ പ്രോപ്സ് മാറുമ്പോൾ അപ്‌ഡേറ്റിംഗ് ഘട്ടം സംഭവിക്കുന്നു, ഇത് ഒരു റീ-റെൻഡറിന് കാരണമാകുന്നു. ക്ലാസ് കമ്പോണന്റുകളിൽ, താഴെ പറയുന്ന മെത്തേഡുകൾ പ്രസക്തമാണ്:

• `static getDerivedStateFromProps(props, state)`: നേരത്തെ സൂചിപ്പിച്ചതുപോലെ, പ്രോപ്സിൽ നിന്ന് സ്റ്റേറ്റ് ഡിറൈവ് ചെയ്യാൻ ഉപയോഗിക്കുന്നു.
• `shouldComponentUpdate(nextProps, nextState)`: ഒരു കമ്പോണന്റ് റീ-റെൻഡർ ചെയ്യണമോ എന്ന് നിയന്ത്രിക്കാൻ ഈ മെത്തേഡ് നിങ്ങളെ അനുവദിക്കുന്നു. ഡിഫോൾട്ടായി, ഇത് `true` റിട്ടേൺ ചെയ്യുന്നു, അതായത് ഓരോ സ്റ്റേറ്റ് അല്ലെങ്കിൽ പ്രോപ്സ് മാറ്റത്തിലും കമ്പോണന്റ് റീ-റെൻഡർ ചെയ്യും. `false` റിട്ടേൺ ചെയ്യുന്നത് അനാവശ്യമായ റീ-റെൻഡറുകൾ തടയാനും പ്രകടനം മെച്ചപ്പെടുത്താനും സഹായിക്കും.
• `render()`: അപ്‌ഡേറ്റ് ചെയ്ത JSX റിട്ടേൺ ചെയ്യാൻ വീണ്ടും വിളിക്കുന്നു.
• `getSnapshotBeforeUpdate(prevProps, prevState)`: ഡോം അപ്‌ഡേറ്റ് ചെയ്യുന്നതിന് തൊട്ടുമുമ്പ് വിളിക്കപ്പെടുന്നു. ഡോമിൽ നിന്ന് ചില വിവരങ്ങൾ (ഉദാഹരണത്തിന്, സ്ക്രോൾ പൊസിഷൻ) മാറ്റം വരുന്നതിന് മുമ്പ് പിടിച്ചെടുക്കാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു. റിട്ടേൺ ചെയ്യുന്ന മൂല്യം `componentDidUpdate()`-ലേക്ക് കൈമാറും.
• `componentDidUpdate(prevProps, prevState, snapshot)`: കമ്പോണന്റ് അപ്‌ഡേറ്റ് ചെയ്യുകയും ഡോം റീ-റെൻഡർ ചെയ്യുകയും ചെയ്ത ഉടൻ വിളിക്കപ്പെടുന്നു. പ്രോപ്സ് അല്ലെങ്കിൽ സ്റ്റേറ്റ് മാറ്റങ്ങളോടുള്ള പ്രതികരണമായി സൈഡ് എഫക്റ്റുകൾ ചെയ്യാൻ ഇത് നല്ലൊരിടമാണ്, ഉദാഹരണത്തിന് അപ്‌ഡേറ്റ് ചെയ്ത ഡാറ്റയെ അടിസ്ഥാനമാക്കി എപിഐ കോളുകൾ നടത്തുക. റീ-റെൻഡറിംഗ് തടയുന്നതിന് കണ്ടീഷണൽ ലോജിക് ഉണ്ടെന്ന് ഉറപ്പാക്കി അനന്തമായ ലൂപ്പുകൾ ഒഴിവാക്കാൻ ഇവിടെ ശ്രദ്ധിക്കുക.

ഹുക്ക്സ് ഉള്ള ഫങ്ഷണൽ കമ്പോണന്റുകളിൽ, `useState` അല്ലെങ്കിൽ `useReducer` നിയന്ത്രിക്കുന്ന സ്റ്റേറ്റിലെ മാറ്റങ്ങൾ, അല്ലെങ്കിൽ ഒരു റീ-റെൻഡറിന് കാരണമാകുന്ന പ്രോപ്സുകൾ, `useEffect` കോൾബാക്കുകളുടെ എക്സിക്യൂഷന് കാരണമാകും, അവയുടെ ഡിപൻഡൻസികൾ തടഞ്ഞില്ലെങ്കിൽ. `useMemo`, `useCallback` ഹുക്കുകൾ മൂല്യങ്ങളും ഫംഗ്ഷനുകളും മെമ്മോയിസ് ചെയ്തുകൊണ്ട് അപ്‌ഡേറ്റുകൾ ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിൽ നിർണായകമാണ്, ഇത് അനാവശ്യമായ റീ-കമ്പ്യൂട്ടേഷനുകൾ തടയുന്നു.

അൺമൗണ്ടിംഗ് (Unmounting)

ഒരു കമ്പോണന്റ് ഡോമിൽ നിന്ന് നീക്കം ചെയ്യുമ്പോൾ അൺമൗണ്ടിംഗ് ഘട്ടം സംഭവിക്കുന്നു. ക്ലാസ് കമ്പോണന്റുകളിൽ, പ്രധാന മെത്തേഡ് ഇതാണ്:

• `componentWillUnmount()`: ഒരു കമ്പോണന്റ് അൺമൗണ്ട് ചെയ്ത് നശിപ്പിക്കുന്നതിന് തൊട്ടുമുമ്പ് വിളിക്കപ്പെടുന്നു. ടൈമറുകൾ ക്ലിയർ ചെയ്യുക, നെറ്റ്‌വർക്ക് അഭ്യർത്ഥനകൾ റദ്ദാക്കുക, അല്ലെങ്കിൽ ഇവന്റ് ലിസണറുകൾ നീക്കം ചെയ്യുക തുടങ്ങിയ ആവശ്യമായ ക്ലീനപ്പ് പ്രവർത്തനങ്ങൾ നടത്താനുള്ള സ്ഥലമാണിത്, ഇത് മെമ്മറി ലീക്കുകൾ തടയുന്നു. ഒരു ഗ്ലോബൽ ചാറ്റ് ആപ്ലിക്കേഷൻ സങ്കൽപ്പിക്കുക; ഒരു കമ്പോണന്റ് അൺമൗണ്ട് ചെയ്യുമ്പോൾ ഒരു വെബ്സോക്കറ്റ് സെർവറിൽ നിന്ന് വിച്ഛേദിക്കുന്നത് ഉൾപ്പെട്ടേക്കാം.

ഫങ്ഷണൽ കമ്പോണന്റുകളിൽ, `useEffect`-ൽ നിന്ന് റിട്ടേൺ ചെയ്യുന്ന ക്ലീനപ്പ് ഫംഗ്ഷൻ ഇതേ ലക്ഷ്യം നിറവേറ്റുന്നു. ഉദാഹരണത്തിന്, നിങ്ങൾ `useEffect`-ൽ ഒരു ടൈമർ സജ്ജമാക്കുകയാണെങ്കിൽ, ആ ടൈമർ ക്ലിയർ ചെയ്യുന്ന ഒരു ഫംഗ്ഷൻ `useEffect`-ൽ നിന്ന് റിട്ടേൺ ചെയ്യും.

കീകൾ (Keys): കാര്യക്ഷമമായ ലിസ്റ്റ് റെൻഡറിംഗിന് അത്യാവശ്യം

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

കീകൾക്കുള്ള മികച്ച കീഴ്‌വഴക്കങ്ങൾ:

• കീകൾ സിബ്ലിംഗ്സിനിടയിൽ (siblings) സവിശേഷമായിരിക്കണം.
• കീകൾ സ്ഥിരമായിരിക്കണം; അവ റെൻഡറുകൾക്കിടയിൽ മാറരുത്.
• ലിസ്റ്റ് പുനഃക്രമീകരിക്കാനോ, ഫിൽട്ടർ ചെയ്യാനോ, അല്ലെങ്കിൽ ലിസ്റ്റിന്റെ തുടക്കത്തിലോ മധ്യത്തിലോ ഇനങ്ങൾ ചേർക്കാനോ കഴിയുമെങ്കിൽ അറേ ഇൻഡെക്സുകൾ കീകളായി ഉപയോഗിക്കുന്നത് ഒഴിവാക്കുക. ലിസ്റ്റിന്റെ ക്രമം മാറുമ്പോൾ ഇൻഡെക്സുകൾ മാറുന്നതുകൊണ്ടാണ് ഇത്, ഇത് റിയാക്ടിന്റെ റീകൺസിലിയേഷൻ അൽഗോരിതത്തെ ആശയക്കുഴപ്പത്തിലാക്കുന്നു.
• നിങ്ങളുടെ ഡാറ്റയിൽ നിന്നുള്ള സവിശേഷമായ ഐഡികൾ (ഉദാ. `product.id`, `user.uuid`) കീകളായി ഉപയോഗിക്കുന്നതാണ് ഉചിതം.

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

റിയാക്ട് റെൻഡറിംഗ് പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യൽ

പ്രകടനം ലോകമെമ്പാടുമുള്ള ഡെവലപ്പർമാർക്ക് ഒരു പൊതുവായ ആശങ്കയാണ്. റെൻഡറിംഗ് ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിന് റിയാക്ട് നിരവധി ടൂളുകളും ടെക്നിക്കുകളും നൽകുന്നു:

1. ഫങ്ഷണൽ കമ്പോണന്റുകൾക്കായി `React.memo()`

`React.memo()` എന്നത് നിങ്ങളുടെ ഫങ്ഷണൽ കമ്പോണന്റിനെ മെമ്മോയിസ് ചെയ്യുന്ന ഒരു ഹയർ-ഓർഡർ കമ്പോണന്റാണ്. ഇത് കമ്പോണന്റിന്റെ പ്രോപ്സുകളുടെ ഒരു ഷാലോ കംപാരിസൺ (shallow comparison) നടത്തുന്നു. പ്രോപ്സുകൾ മാറിയിട്ടില്ലെങ്കിൽ, റിയാക്ട് കമ്പോണന്റ് റീ-റെൻഡർ ചെയ്യുന്നത് ഒഴിവാക്കുകയും അവസാനമായി റെൻഡർ ചെയ്ത ഫലം പുനരുപയോഗിക്കുകയും ചെയ്യുന്നു. ഇത് ക്ലാസ് കമ്പോണന്റുകളിലെ `shouldComponentUpdate`-ന് സമാനമാണ്, പക്ഷേ സാധാരണയായി ഫങ്ഷണൽ കമ്പോണന്റുകൾക്കാണ് ഉപയോഗിക്കുന്നത്.

ഉദാഹരണം:

            
const ProductCard = React.memo(function ProductCard(props) {
  /* render using props */
});

            

              
                Copy
              
            
          

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

2. `useMemo()`, `useCallback()` ഹുക്കുകൾ

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

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

3. ലേസി ലോഡിംഗും (Lazy Loading) കോഡ് സ്പ്ലിറ്റിംഗും (Code Splitting)

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

കോഡ് സ്പ്ലിറ്റിംഗ് എളുപ്പത്തിൽ നടപ്പിലാക്കാൻ റിയാക്ട് React.lazy(), Suspense എന്നിവ നൽകുന്നു:

• `React.lazy()`: ഡൈനാമിക്കായി ഇമ്പോർട്ട് ചെയ്ത ഒരു കമ്പോണന്റിനെ ഒരു സാധാരണ കമ്പോണന്റായി റെൻഡർ ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നു.
• `Suspense`: ലേസി കമ്പോണന്റ് ലോഡ് ചെയ്യുമ്പോൾ ഒരു ലോഡിംഗ് ഇൻഡിക്കേറ്റർ (ഫാൾബാക്ക് യുഐ) വ്യക്തമാക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

ഉദാഹരണം:

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

function MyComponent() {
  return (
    

      Loading...
}>