റിയാക്ട് കൺകറന്റ് റെൻഡറിംഗ്: ഫൈബർ ആർക്കിടെക്ചറും വർക്ക് ലൂപ്പ് അനാലിസിസും ഉപയോഗിച്ച് പെർഫോമൻസ് മെച്ചപ്പെടുത്താം

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

കൺകറന്റ് റെൻഡറിംഗിന്റെ ആവശ്യകത മനസ്സിലാക്കാം

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

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

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

ഫൈബർ ആർക്കിടെക്ചർ അവതരിപ്പിക്കുന്നു

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

എന്താണ് ഒരു ഫൈബർ?

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

ഒരു ഫൈബർ നോഡിന്റെ പ്രധാന പ്രോപ്പർട്ടികൾ ഇവയാണ്:

• type: കമ്പോണന്റിന്റെ തരം (ഉദാ: div, MyComponent).
• key: കമ്പോണന്റിന് നൽകിയിട്ടുള്ള തനതായ കീ (കാര്യക്ഷമമായ റീകൺസിലിയേഷന് ഉപയോഗിക്കുന്നു).
• props: കമ്പോണന്റിലേക്ക് പാസ് ചെയ്ത പ്രോപ്‌സ്.
• child: കമ്പോണന്റിന്റെ ആദ്യത്തെ ചൈൽഡിനെ പ്രതിനിധീകരിക്കുന്ന ഫൈബർ നോഡിലേക്കുള്ള ഒരു പോയിന്റർ.
• sibling: കമ്പോണന്റിന്റെ അടുത്ത സിബ്ലിംഗിനെ പ്രതിനിധീകരിക്കുന്ന ഫൈബർ നോഡിലേക്കുള്ള ഒരു പോയിന്റർ.
• return: കമ്പോണന്റിന്റെ പാരന്റിനെ പ്രതിനിധീകരിക്കുന്ന ഫൈബർ നോഡിലേക്കുള്ള ഒരു പോയിന്റർ.
• stateNode: യഥാർത്ഥ കമ്പോണന്റ് ഇൻസ്റ്റൻസിലേക്കുള്ള ഒരു റഫറൻസ് (ഉദാ: ഹോസ്റ്റ് കമ്പോണന്റുകൾക്കുള്ള DOM നോഡ്, ഒരു ക്ലാസ് കമ്പോണന്റ് ഇൻസ്റ്റൻസ്).
• alternate: കമ്പോണന്റിന്റെ മുൻപത്തെ പതിപ്പിനെ പ്രതിനിധീകരിക്കുന്ന ഫൈബർ നോഡിലേക്കുള്ള ഒരു പോയിന്റർ.
• effectTag: കമ്പോണന്റിന് ആവശ്യമായ അപ്‌ഡേറ്റിന്റെ തരം സൂചിപ്പിക്കുന്ന ഒരു ഫ്ലാഗ് (ഉദാ: പ്ലേസ്മെന്റ്, അപ്ഡേറ്റ്, ഡിലീഷൻ).

ഫൈബർ ട്രീ

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

ഈ ഡ്യുവൽ-ട്രീ സമീപനം റെൻഡറിംഗ് അപ്‌ഡേറ്റുകൾ നോൺ-ബ്ലോക്കിംഗ് രീതിയിൽ നടത്താൻ റിയാക്ടിനെ അനുവദിക്കുന്നു. വർക്ക്-ഇൻ-പ്രോഗ്രസ് ട്രീ പശ്ചാത്തലത്തിൽ നിർമ്മിക്കപ്പെടുമ്പോൾ നിലവിലെ ട്രീ ഉപയോക്താവിന് ദൃശ്യമായി തുടരും. ഇത് അപ്‌ഡേറ്റുകൾക്കിടയിൽ UI ഫ്രീസ് ആവുകയോ പ്രതികരണരഹിതമാവുകയോ ചെയ്യുന്നത് തടയുന്നു.

ഫൈബർ ആർക്കിടെക്ചറിന്റെ പ്രയോജനങ്ങൾ

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

വർക്ക് ലൂപ്പ്: ഫൈബർ എങ്ങനെ കൺകറൻസി സാധ്യമാക്കുന്നു

കൺകറന്റ് റെൻഡറിംഗിനെ നയിക്കുന്ന എഞ്ചിനാണ് വർക്ക് ലൂപ്പ്. ഇത് ഫൈബർ ട്രീയിലൂടെ സഞ്ചരിക്കുന്ന ഒരു റിക്കേഴ്സീവ് ഫംഗ്ഷനാണ്, ഓരോ ഫൈബർ നോഡിലും പ്രവർത്തിക്കുകയും UI-യെ ഇൻക്രിമെന്റലായി അപ്ഡേറ്റ് ചെയ്യുകയും ചെയ്യുന്നു. വർക്ക് ലൂപ്പിന് താഴെ പറയുന്ന ജോലികളുണ്ട്:

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

വർക്ക് ലൂപ്പിന്റെ ഘട്ടങ്ങൾ

വർക്ക് ലൂപ്പിന് പ്രധാനമായും രണ്ട് ഘട്ടങ്ങളുണ്ട്:

1. റെൻഡർ ഫേസ് (റീകൺസിലിയേഷൻ ഫേസ് എന്നും അറിയപ്പെടുന്നു): ഈ ഘട്ടത്തിലാണ് വർക്ക്-ഇൻ-പ്രോഗ്രസ് ഫൈബർ ട്രീ നിർമ്മിക്കുന്നത്. ഈ ഘട്ടത്തിൽ, റിയാക്ട് ഫൈബർ ട്രീയിലൂടെ സഞ്ചരിച്ച്, നിലവിലെ ട്രീയെ ആവശ്യമുള്ള അവസ്ഥയുമായി താരതമ്യം ചെയ്യുകയും എന്ത് മാറ്റങ്ങളാണ് വരുത്തേണ്ടതെന്ന് തീരുമാനിക്കുകയും ചെയ്യുന്നു. ഈ ഘട്ടം അസിൻക്രണസും തടസ്സപ്പെടുത്താവുന്നതുമാണ്. DOM-ൽ എന്ത് മാറ്റം വരുത്തണം എന്ന് ഇത് തീരുമാനിക്കുന്നു.
2. കമ്മിറ്റ് ഫേസ്: ഈ ഘട്ടത്തിലാണ് മാറ്റങ്ങൾ യഥാർത്ഥ DOM-ൽ പ്രയോഗിക്കുന്നത്. ഈ ഘട്ടത്തിൽ, റിയാക്ട് DOM നോഡുകൾ അപ്ഡേറ്റ് ചെയ്യുകയും, പുതിയ നോഡുകൾ ചേർക്കുകയും, പഴയ നോഡുകൾ നീക്കം ചെയ്യുകയും ചെയ്യുന്നു. ഈ ഘട്ടം സിൻക്രണസും തടസ്സപ്പെടുത്താനാവാത്തതുമാണ്. ഇത് യഥാർത്ഥത്തിൽ DOM-ൽ മാറ്റം വരുത്തുന്നു.

വർക്ക് ലൂപ്പ് എങ്ങനെ കൺകറൻസി സാധ്യമാക്കുന്നു

റെൻഡർ ഫേസ് അസിൻക്രണസും തടസ്സപ്പെടുത്താവുന്നതുമാണ് എന്നതിലാണ് കൺകറന്റ് റെൻഡറിംഗിന്റെ താക്കോൽ. ഇതിനർത്ഥം, യൂസർ ഇൻപുട്ട് അല്ലെങ്കിൽ നെറ്റ്‌വർക്ക് അഭ്യർത്ഥനകൾ പോലുള്ള മറ്റ് ടാസ്ക്കുകൾ കൈകാര്യം ചെയ്യാൻ ബ്രൗസറിനെ അനുവദിക്കുന്നതിനായി റിയാക്ടിന് എപ്പോൾ വേണമെങ്കിലും റെൻഡർ ഫേസ് താൽക്കാലികമായി നിർത്താൻ കഴിയും. ബ്രൗസർ നിഷ്‌ക്രിയമാകുമ്പോൾ, റിയാക്ടിന് നിർത്തിയിടത്തുനിന്ന് റെൻഡർ ഫേസ് പുനരാരംഭിക്കാൻ കഴിയും.

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

വർക്ക് ലൂപ്പിലെ മുൻഗണന

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

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

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

കൺകറന്റ് റെൻഡറിംഗിന്റെ പ്രായോഗിക ഉദാഹരണങ്ങൾ

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

1. യൂസർ ഇൻപുട്ട് ഡിബൗൺസ് ചെയ്യുക

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

കൺകറന്റ് റെൻഡറിംഗ് ഉപയോഗിച്ച്, ഉപയോക്താവ് ഒരു ചെറിയ സമയത്തേക്ക് ടൈപ്പ് ചെയ്യുന്നത് നിർത്തുന്നത് വരെ സെർച്ച് ഫലങ്ങളുടെ റെൻഡറിംഗ് വൈകിപ്പിക്കാൻ നമുക്ക് ഡിബൗൺസിംഗ് ഉപയോഗിക്കാം. ഇത് റിയാക്ടിന് ഉപയോക്താവിന്റെ ഇൻപുട്ടിന് മുൻഗണന നൽകാനും UI പ്രതികരണരഹിതമാകുന്നത് തടയാനും അനുവദിക്കുന്നു.

ലളിതമായ ഒരു ഉദാഹരണം ഇതാ:

import React, { useState, useCallback } from 'react';

function SearchBar() {
 const [searchTerm, setSearchTerm] = useState('');

 const debouncedSearch = useCallback(
 debounce((value) => {
 // Perform search logic here
 console.log('Searching for:', value);
 }, 300),
 []
 );

 const handleChange = (event) => {
 const value = event.target.value;
 setSearchTerm(value);
 debouncedSearch(value);
 };

 return (
 
 );
}

// Debounce function
function debounce(func, delay) {
 let timeout;
 return function(...args) {
 const context = this;
 clearTimeout(timeout);
 timeout = setTimeout(() => func.apply(context, args), delay);
 };
}

export default SearchBar;

ഈ ഉദാഹരണത്തിൽ, debounce ഫംഗ്ഷൻ ഉപയോക്താവ് 300 മില്ലിസെക്കൻഡ് ടൈപ്പ് ചെയ്യുന്നത് നിർത്തുന്നത് വരെ സെർച്ച് ലോജിക്കിന്റെ എക്സിക്യൂഷൻ വൈകിപ്പിക്കുന്നു. ഇത് ആവശ്യമുള്ളപ്പോൾ മാത്രം സെർച്ച് ഫലങ്ങൾ റെൻഡർ ചെയ്യപ്പെടുന്നുവെന്ന് ഉറപ്പാക്കുന്നു, ഇത് ആപ്ലിക്കേഷന്റെ പെർഫോമൻസ് മെച്ചപ്പെടുത്തുന്നു.

2. ചിത്രങ്ങൾ ലേസി ലോഡ് ചെയ്യുക

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

ഈ ടെക്നിക് ആപ്ലിക്കേഷന്റെ പെർഫോമൻസ് ഗണ്യമായി മെച്ചപ്പെടുത്താൻ സഹായിക്കും, കാരണം ഉപയോക്താവിന് പേജുമായി ഇടപഴകാൻ തുടങ്ങുന്നതിന് മുമ്പ് എല്ലാ ചിത്രങ്ങളും ലോഡ് ആകുന്നത് വരെ കാത്തിരിക്കേണ്ടതില്ല.

react-lazyload ലൈബ്രറി ഉപയോഗിച്ചുള്ള ഒരു ലളിതമായ ഉദാഹരണം ഇതാ:

import React from 'react';
import LazyLoad from 'react-lazyload';

function ImageComponent({ src, alt }) {
 return (
 Loading...
}>
 
 
 );
}

export default ImageComponent;

ഈ ഉദാഹരണത്തിൽ, LazyLoad കമ്പോണന്റ് ചിത്രം വ്യൂപോർട്ടിൽ ദൃശ്യമാകുന്നതുവരെ അതിന്റെ ലോഡിംഗ് വൈകിപ്പിക്കുന്നു. ചിത്രം ലോഡ് ചെയ്യുമ്പോൾ ഒരു ലോഡിംഗ് ഇൻഡിക്കേറ്റർ കാണിക്കാൻ placeholder പ്രോപ്പ് നമ്മളെ അനുവദിക്കുന്നു.

3. ഡാറ്റാ ഫെച്ചിംഗിനായി സസ്പെൻസ്

ഡാറ്റ ലോഡ് ചെയ്യാൻ കാത്തിരിക്കുമ്പോൾ ഒരു കമ്പോണന്റിന്റെ റെൻഡറിംഗ് "സസ്പെൻഡ്" ചെയ്യാൻ റിയാക്ട് സസ്പെൻസ് നിങ്ങളെ അനുവദിക്കുന്നു. ഡാറ്റാ ഫെച്ചിംഗ് സാഹചര്യങ്ങളിൽ ഇത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്, ഒരു API-ൽ നിന്ന് ഡാറ്റയ്ക്കായി കാത്തിരിക്കുമ്പോൾ നിങ്ങൾ ഒരു ലോഡിംഗ് ഇൻഡിക്കേറ്റർ കാണിക്കാൻ ആഗ്രഹിക്കുന്നു.

സസ്പെൻസ് കൺകറന്റ് റെൻഡറിംഗുമായി തടസ്സങ്ങളില്ലാതെ സംയോജിക്കുന്നു, ഇത് ഡാറ്റ ലോഡിംഗിന് മുൻഗണന നൽകാനും UI പ്രതികരണരഹിതമാകുന്നത് തടയാനും റിയാക്ടിനെ അനുവദിക്കുന്നു.

ലളിതമായ ഒരു ഉദാഹരണം ഇതാ:

import React, { Suspense } from 'react';

// A fake data fetching function that returns a Promise
const fetchData = () => {
 return new Promise(resolve => {
 setTimeout(() => {
 resolve({ data: 'Data loaded!' });
 }, 2000);
 });
};

// A React component that uses Suspense
function MyComponent() {
 const resource = fetchData();
 return (
 Loading...