𝗦𝘁𝗼𝗽 𝗕𝗹𝗼𝗰𝗸𝗶𝗻𝗴 𝗧𝗵𝗲 𝗨𝗜: 𝗜𝗻𝘁𝗲𝗿𝗿𝘂𝗽𝘁𝗶𝗯𝗹𝗲 𝗥𝗲𝗻𝗱𝗲𝗿𝗶𝗻𝗴 𝗜𝗻 𝗥𝗲𝗮𝗰𝘁
React renders നിങ്ങളുടെ user interface ഫ്രീസ് ചെയ്തേക്കാം.
കഠിനമായ കണക്കുകൂട്ടലുകൾ (Heavy computations) മെയിൻ ത്രെഡ് ബ്ലോക്ക് ചെയ്യുന്നു. ഇത് കാരണം ഉപയോക്താക്കൾക്ക് മരവിച്ച (frozen) സ്ക്രീൻ കാണേണ്ടി വരുന്നു. ഇത് ഉപയോക്താവിന്റെ അനുഭവം നശിപ്പിക്കുന്നു.
Interruptible rendering ഈ പ്രശ്നം പരിഹരിക്കുന്നു. ഉപയോക്താവിന്റെ ഇൻപുട്ടുകൾ കൈകാര്യം ചെയ്യുന്നതിനായി ജോലി താൽക്കാലികമായി നിർത്താൻ ഇത് React-നെ അനുവദിക്കുന്നു.
ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു:
- React ജോലിയെ ചെറിയ ഭാഗങ്ങളായി തിരിക്കുന്നു.
- ക്ലിക്കുകൾ അല്ലെങ്കിൽ ടൈപ്പിംഗ് പോലുള്ള ഉയർന്ന മുൻഗണനയുള്ള ജോലികൾക്കായി ഇത് പരിശോധിക്കുന്നു.
- ഉപയോക്താവ് എന്തെങ്കിലും ചെയ്യുന്നുണ്ടെങ്കിൽ, React പശ്ചാത്തലത്തിലുള്ള (background) ജോലി താൽക്കാലികമായി നിർത്തുന്നു.
- React ആദ്യം ആ ഇൻപുട്ട് കൈകാര്യം ചെയ്യുന്നു.
- പിന്നീട് React പശ്ചാത്തല ജോലി വീണ്ടും തുടങ്ങുന്നു.
ഇത് നിയന്ത്രിക്കാൻ നിങ്ങൾ transitions ഉപയോഗിക്കുന്നു. അടിയന്തരമല്ലാത്ത അപ്ഡേറ്റുകളെ അടയാളപ്പെടുത്താൻ useTransition ഉപയോഗിക്കുക. ഇത് UI റെസ്പോൺസീവ് ആയി നിലനിർത്താൻ React-നോട് നിർദ്ദേശിക്കുന്നു.
കഠിനമായ ഡാറ്റാ പ്രോസസ്സിംഗ് നിങ്ങളുടെ ആപ്പിന്റെ പെർഫോമൻസ് നശിപ്പിക്കാൻ അനുവദിക്കരുത്.
Source: https://dev.to/iprajapatiparesh/stop-blocking-the-ui-interruptible-rendering-in-react-32mb