Day 5 of Learning React: Batching ഉം Functional Updates ഉം
ഒരു state setter പലതവണ വിളിക്കുന്നത് പലതവണ renders ഉണ്ടാക്കുമെന്ന് ഞാൻ കരുതി.
ഞാൻ തെറ്റിദ്ധരിച്ചു.
React അതിനേക്കാൾ ബുദ്ധിയുള്ളതാണ്. അത് Automatic Batching എന്ന് വിളിക്കപ്പെടുന്ന ഒരു പ്രക്രിയ ഉപയോഗിക്കുന്നു.
ഓരോ അപ്ഡേറ്റിന് ശേഷവും render ചെയ്യുന്നതിന് പകരം, React അവയെ ഒരുമിച്ച് ഗ്രൂപ്പ് ചെയ്യുന്നു. ഇത് എല്ലാ അപ്ഡേറ്റുകളും ശേഖരിക്കുകയും ഒരൊറ്റ render മാത്രം നിർവ്വഹിക്കുകയും ചെയ്യുന്നു. ഇത് പെർഫോമൻസ് വർദ്ധിപ്പിക്കാൻ സഹായിക്കുന്നു.
ഇന്ന് ഞാൻ പഠിച്ച കാര്യങ്ങൾ താഴെ പറയുന്നവയാണ്.
The Batching Process നിങ്ങൾ ഒന്നിലധികം state ഫംഗ്ഷനുകൾ വിളിക്കുമ്പോൾ, React ഈ രീതിയാണ് പിന്തുടരുന്നത്:
- ഒന്നിലധികം state അപ്ഡേറ്റുകൾ നടക്കുന്നു.
- React അവയെ ഒരുമിച്ച് batch ചെയ്യുന്നു.
- React ഒരു render നിർവ്വഹിക്കുന്നു.
- React മാറ്റങ്ങൾ UI-ലേക്ക് എത്തിക്കുന്നു (commits).
The Problem with Standard Updates ഞാൻ ഈ കോഡ് പരീക്ഷിച്ചു: setCount(count + 1); setCount(count + 1); setCount(count + 1);
count 0-ൽ നിന്ന് 3 ആകുമെന്ന് ഞാൻ പ്രതീക്ഷിച്ചു. എന്നാൽ അത് 0-ൽ നിന്ന് 1 ആയി മാറി.
setCount(count + 1) എന്നത് "count വർദ്ധിപ്പിക്കുക" എന്നല്ല അർത്ഥമാക്കുന്നത്. പകരം "count ഈ പ്രത്യേക മൂല്യത്തിലേക്ക് (value) മാറ്റുക" എന്നാണ് അർത്ഥമാക്കുന്നത്.
count 0 ആണെങ്കിൽ, ഓരോ വരിയും React-നോട് count 1 ആക്കാൻ ആവശ്യപ്പെടുന്നു. React ഇവയെ batch ചെയ്യുമ്പോൾ, അവസാന നിർദ്ദേശം count 1 ആക്കാനാണെന്ന് കാണുന്നു.
The Solution: Functional Updates ഇത് പരിഹരിക്കാൻ, നിങ്ങൾ ഒരു functional update ഉപയോഗിക്കണം. ഇത് update queue-വിൽ ലഭ്യമായ ഏറ്റവും പുതിയ state ഉപയോഗിക്കുന്നു.
ശരിയായ രീതി: setCount((prev) => prev + 1);
ഈ രീതി ഉപയോഗിക്കുമ്പോൾ, ഓരോ അപ്ഡേറ്റിനും ഏറ്റവും പുതിയ മൂല്യം React നൽകുന്നു.
- ആദ്യത്തെ അപ്ഡേറ്റ്: 0 + 1 = 1
- രണ്ടാമത്തെ അപ്ഡേറ്റ്: 1 + 1 = 2
- മൂന്നാമത്തെ അപ്ഡേറ്റ്: 2 + 1 = 3
ഇപ്പോൾ counter ശരിക്കും 3-ൽ എത്തുന്നു.
A Common Mistake ഞാൻ ഒരിക്കൽ ഇങ്ങനെ എഴുതി: setCount((prev) => { prev + 1 });
Counter undefined ആയി മാറി.
ഒരു arrow function-ൽ നിങ്ങൾ curly braces ഉപയോഗിക്കുകയാണെങ്കിൽ, നിർബന്ധമായും return കീവേഡ് ഉപയോഗിക്കണം.
പകരം ഇത് ഉപയോഗിക്കുക:
setCount((prev) => prev + 1);
Key Takeaways:
- വേഗത വർദ്ധിപ്പിക്കുന്നതിനായി React ഒന്നിലധികം state അപ്ഡേറ്റുകളെ batch ചെയ്യുന്നു.
- setState കോളുകൾ എപ്പോഴും ഉടനടി renders ഉണ്ടാക്കണമെന്നില്ല.
- Standard updates നിലവിലെ render cycle-ലെ മൂല്യം ഉപയോഗിക്കുന്നു.
- Functional updates update queue-വിൽ നിന്നുള്ള ഏറ്റവും പുതിയ state ഉപയോഗിക്കുന്നു.
- ഈ മാറ്റങ്ങൾ നിയന്ത്രിക്കാൻ React ഒരു ആന്തരിക Update Queue ഉപയോഗിക്കുന്നു.