ES2023 Adds Non-Mutating Array Methods, Letting React Detect State Changes Instantly

ES2023 സ്പെസിഫിക്കേഷൻ ഇപ്പോൾ നാല് പുതിയ അറേ മെത്തേഡുകൾ—toSorted, toReversed, toSpliced, with—നൽകുന്നുണ്ട്. ഇവ ഒറിജിനൽ അറേ മാറ്റുന്നതിന് (mutate) പകരം പുതിയ അറേകൾ തിരികെ നൽകുന്നു. ഇമ്മ്യൂട്ടബിൾ സ്റ്റേറ്റ് (immutable state) ഉപയോഗിക്കുന്ന React പോലുള്ള UI ലൈബ്രറികളിൽ, ബഗുകൾക്കും അനാവശ്യമായ കോഡുകൾക്കും (boilerplate) കാരണമാകാറുള്ള സ്പ്രെഡ്-ഓപ്പറേറ്റർ (spread-operator) രീതികൾക്ക് പകരമായി ഡെവലപ്പർമാർക്ക് ഇവ ഉപയോഗിക്കാം.

ഈ മാറ്റം പ്രധാനമാകുന്നത് എന്തുകൊണ്ട്

React ഒരു കമ്പോണന്റ് വീണ്ടും റെൻഡർ ചെയ്യണോ വേണ്ടയോ എന്ന് തീരുമാനിക്കുന്നത് പഴയ സ്റ്റേറ്റ് റഫറൻസും പുതിയ റഫറൻസും തമ്മിൽ താരതമ്യം ചെയ്തുകൊണ്ടാണ്. റഫറൻസിൽ മാറ്റമില്ലെങ്കിൽ, ഒന്നും മാറിയിട്ടില്ലെന്ന് React കരുതും. സാധാരണയായി ഉപയോഗിക്കുന്ന Array.prototype.sort മെത്തേഡ് അറേയെ അതേ സ്ഥാനത്ത് തന്നെ ക്രമീകരിക്കുകയും (sort in place) അതേ റഫറൻസ് തന്നെ തിരികെ നൽകുകയും ചെയ്യുന്നു. അതിനാൽ setTasks(prev => prev.sort(fn)) പോലുള്ള ഒരു കോൾ വരുമ്പോൾ, മാറ്റം സംഭവിച്ചിട്ടില്ലെന്ന് React തെറ്റിദ്ധരിക്കുന്നു. ഇതിന്റെ ഫലമായി UI പഴയ ഡാറ്റയിൽ തന്നെ തുടരുന്നു, ഇത് യഥാർത്ഥ പ്രോജക്റ്റുകളിൽ പലപ്പോഴും കാണാറുള്ള ഒരു ബഗ്ഗാണ്.

ഡെവലപ്പർമാർ ഈ പ്രശ്നം പരിഹരിക്കാൻ സാധാരണയായി സ്പ്രെഡ് ഓപ്പറേറ്റർ ഉപയോഗിച്ച് അറേ ആദ്യം ക്ലോൺ ചെയ്യാറുണ്ട്, അങ്ങനെ സോർട്ടിംഗ് നടത്തുമ്പോൾ പുതിയൊരു റഫറൻസ് ലഭിക്കുന്നു:

setTasks(prev => [...prev].sort((a, b) => b.priority - a.priority));

ഈ രീതി പ്രവർത്തിക്കുമെങ്കിലും, ഇത് കോഡിൽ അനാവശ്യമായ സങ്കീർണ്ണത കൂട്ടുകയും പലപ്പോഴും മറന്നുപോകാറുള്ള ഒന്നാവുകയും ചെയ്യുന്നു. പുതിയ ES2023 മെത്തേഡുകൾ ഒറിജിനൽ അറേയിൽ മാറ്റം വരുത്താതെ തന്നെ നേരിട്ട് പുതിയൊരു അറേ നിർമ്മിക്കാൻ ലളിതമായ വഴി നൽകുന്നു.

മാറ്റങ്ങൾ വരുത്താത്ത (non-mutating) നാല് മെത്തേഡുകൾ

• toSorted(compareFn?) – sort-ന് സമാനമായി പ്രവർത്തിക്കുന്നു, എന്നാൽ ഇത് ക്രമീകരിച്ച ഒരു കോപ്പി (copy) തിരികെ നൽകുന്നു. ഒറിജിനൽ അറേയിൽ മാറ്റം സംഭവിക്കില്ല.
• toReversed() – reverse-ന് പകരമായി ഉപയോഗിക്കാം. ഇത് അറേയുടെ ക്രമം തിരിച്ചുള്ള ഒരു കോപ്പി നൽകുന്നു, ഒറിജിനൽ ക്രമം നിലനിൽക്കുന്നു.
• toSpliced(start, deleteCount, ...items) – സൈഡ് ഇഫക്റ്റുകൾ ഇല്ലാതെ splice-ന് സമാനമായി പ്രവർത്തിക്കുന്നു. തിരികെ ലഭിക്കുന്ന അറേയിൽ പുതിയ ഐറ്റങ്ങൾ ചേർക്കപ്പെടുകയോ നീക്കം ചെയ്യപ്പെടുകയോ ചെയ്തതായിരിക്കും, എന്നാൽ ഒറിജിനൽ അറേ പഴയപടി തന്നെയായിരിക്കും.
• with(index, value) – index-ലെ മൂല്യത്തിന് പകരം value നൽകി പുതിയൊരു അറേ തിരികെ നൽകുന്നു. map അല്ലെങ്കിൽ സ്പ്രെഡ് ഓപ്പറേറ്റർ ഉപയോഗിച്ച് ഒരു എലമെന്റ് മാറ്റുന്ന രീതിക്ക് പകരമാണിത്.

ഈ നാല് മെത്തേഡുകളും ECMAScript സ്റ്റാൻഡേർഡിന്റെ ഭാഗമാണ്, കൂടാതെ നിലവിലെ പ്രധാന ബ്രൗസറുകളിലും Node.js 20-ലും ലഭ്യമാണ്.

കോഡ് ഇപ്പോൾ എങ്ങനെയിരിക്കും

ഒരു ലിസ്റ്റ് സോർട്ട് ചെയ്യുന്നു (Sorting a list)

// Before
setTasks(prev => [...prev].sort((a, b) => b.priority - a.priority));

// After
setTasks(prev => prev.toSorted((a, b) => b.priority - a.priority));

ഒരു ഐറ്റം അപ്ഡേറ്റ് ചെയ്യുന്നു (Updating a single item)

// Before
setItems(prev =>
  prev.map((item, i) => (i === idx ? newItem : item))
);

// After
setItems(prev => prev.with(idx, newItem));

ഒരു അറേ റിവേഴ്സ് ചെയ്യുന്നു (Reversing an array)

setLogs(prev => prev.toReversed());

ഒരു എലമെന്റ് നീക്കം ചെയ്യുന്നു (Removing an element)

setTags(prev => prev.toSpliced(removeIdx, 1));

പുതിയ സിന്റാക്സ് ഉപയോഗിക്കുന്നതിലൂടെ സ്പ്രെഡ് ഓപ്പറേറ്ററുകളോ മാപ്പിംഗ് ലൂപ്പുകളോ ഒഴിവാക്കാം, ഇത് സ്റ്റേറ്റ് അപ്ഡേറ്റുകൾ കൂടുതൽ ലളിതമാക്കുകയും തെറ്റുകൾ കുറയ്ക്കുകയും ചെയ്യുന്നു.

ആർക്കൊക്കെ ഗുണമുണ്ടാകും, ആർക്കൊക്കെ പ്രയാസമുണ്ടാകും

ഡെവലപ്പർമാർ (Developers) React, Vue, Redux, Zustand അല്ലെങ്കിൽ ഇമ്മ്യൂട്ടബിൾ ഡാറ്റാ സ്ട്രക്ചറുകൾ ഉപയോഗിക്കുന്ന ഏതെങ്കിലും ഫ്രെയിംവർക്ക് ഉപയോഗിക്കുന്നവർക്ക് ഇതിലൂടെ കൂടുതൽ വ്യക്തത ലഭിക്കുന്നു: ഒരു മെത്തേഡ് വിളിക്കുക, പുതിയ അറേ ലഭിക്കുക, അത് സെറ്ററിലേക്ക് നൽകുക. സ്പ്രെഡ് ഓപ്പറേറ്റർ ഉപയോഗിച്ച് കോപ്പി ചെയ്യുന്നതിലെ അനാവശ്യമായ വരികൾ കുറയുന്നത് റെൻഡർ സൈക്കിളുകളുടെ വേഗത വർദ്ധിപ്പിക്കാനും സഹായിച്ചേക്കാം, കാരണം സോർട്ടിംഗിന് മുൻപ് ഇടക്കാല കോപ്പികൾ ഉണ്ടാക്കുന്നത് എൻജിൻ ഒഴിവാക്കുന്നു.

പഴയ ബ്രൗസറുകൾ ഉപയോഗിക്കുന്ന ടീമുകൾ (Teams with legacy browsers) പോളിഫില്ലുകൾ (polyfills) ഉപയോഗിക്കേണ്ടി വന്നേക്കാം. പഴയ സാഫാരി (Safari) അല്ലെങ്കിൽ ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ (Internet Explorer) പതിപ്പുകളിൽ ഈ മെത്തേഡുകൾ ലഭ്യമല്ല, അതിനാൽ ഇത്തരം പ്ലാറ്റ്‌ഫോമുകൾ ലക്ഷ്യമിടുന്ന പ്രൊഡക്ഷൻ ബിൽഡുകളിൽ ഇവ ഉൾപ്പെടുത്തേണ്ടതുണ്ട്. ഇത് ബണ്ടിൽ സൈസ് (bundle size) അല്പം കൂട്ടുമെങ്കിലും, കോഡിന്റെ വ്യക്തതയ്ക്കായി ഇത് ചെയ്യുന്നത് ലാഭകരമാണ്.

ലൈബ്രറി നിർമ്മാതാക്കൾ (Library authors) പുതിയ സിഗ്നേച്ചറുകൾ ലഭ്യമാക്കുന്നതിനായി ടൈപ്പ് ഡെഫനിഷനുകൾ (ഉദാഹരണത്തിന് TypeScript) അപ്ഡേറ്റ് ചെയ്യേണ്ടി വന്നേക്കാം. ഔദ്യോഗിക @types പാക്കേജുകളിൽ ഇവ ലഭ്യമാകുന്നതുവരെ ഡെവലപ്പർമാർക്ക് താൽക്കാലികമായി ടൈപ്പ് എററുകൾ കാണാൻ സാധ്യതയുണ്ട്.

ഇനി ശ്രദ്ധിക്കേണ്ട കാര്യങ്ങൾ

• അഡോപ്ഷൻ മെട്രിക്സ് (Adoption metrics) – ESLint പോലുള്ള ടൂളുകൾ സ്റ്റേറ്റ് സെറ്ററുകളിൽ മ്യൂട്ടബിൾ അറേ കോളുകൾ കണ്ടെത്തുന്നതിനുള്ള നിയമങ്ങൾ ഉടൻ തന്നെ കൊണ്ടുവന്നേക്കാം, ഇത് ഡെവലപ്പർമാരെ പുതിയ മെത്തേഡുകളിലേക്ക് നയിക്കും.
• പെർഫോമൻസ് പഠനങ്ങൾ (Performance studies) – സ്പ്രെഡ് ഓപ്പറേറ്റർ ഉപയോഗിച്ച് കോപ്പി ചെയ്ത ശേഷം മ്യൂട്ടബിൾ ഓപ്പറേഷൻ നടത്തുന്നതിനേക്കാൾ വേഗത പുതിയ മെത്തേഡുകൾക്കുണ്ടെന്ന് പ്രാഥമിക പഠനങ്ങൾ സൂചിപ്പിക്കുന്നു, എങ്കിലും യഥാർത്ഥ സാഹചര്യങ്ങളിലെ ഡാറ്റ ഇതിന്റെ കൃത്യത സ്ഥിരീകരിക്കും.
• കൂടുതൽ നിർദ്ദേശങ്ങൾ (Further proposals) – ഇമ്മ്യൂട്ടബിൾ-ബൈ-ഡിഫോൾട്ട് (immutable-by-default) API-കൾക്കായി ECMAScript കമ്മിറ്റി കൂടുതൽ ഗവേഷണങ്ങൾ നടത്തുന്നുണ്ട്; വരാനിരിക്കുന്ന മാറ്റങ്ങൾ ശ്രദ്ധിക്കുന്നത് സമാനമായ രീതിയിലുള്ള കൂടുതൽ മെത്തേഡുകൾ കണ്ടെത്താൻ സഹായിക്കും.

ചുരുക്കത്തിൽ (Takeaway)

ഏറ്റവും പുതിയ ECMAScript സ്പെസിഫിക്കേഷൻ, സ്പ്രെഡ് ഓപ്പറേറ്റർ ഉപയോഗിച്ചുള്ള സങ്കീർണ്ണമായ രീതികൾ ഇല്ലാതെ തന്നെ സ്റ്റേറ്റ് ഇമ്മ്യൂട്ടബിൾ ആയി നിലനിർത്താൻ UI ഡെവലപ്പർമാർക്ക് ലളിതമായ വഴി നൽകുന്നു. sort, reverse, splice, ഇൻഡക്സ് അടിസ്ഥാനമാക്കിയുള്ള മാറ്റങ്ങൾ എന്നിവയ്ക്ക് പകരം toSorted, toReversed, toSpliced, with എന്നിവ ഉപയോഗിക്കുന്നതിലൂടെ, React-ന്റെ ചേഞ്ച് ഡിറ്റക്ഷൻ (change detection) കൃത്യമായി പ്രവർത്തിക്കാനും നിങ്ങളുടെ കോഡ് കൂടുതൽ വായിക്കാവുന്നതാക്കാനും സാധിക്കുന്നു. നിങ്ങളുടെ ടാർഗെറ്റ് ബ്രൗസറുകൾ ഈ പുതിയ മെത്തേഡുകൾ പിന്തുണയ്ക്കുന്നുണ്ടെങ്കിൽ—അല്ലെങ്കിൽ നിങ്ങൾ പോളിഫില്ലുകൾ ഉപയോഗിക്കാൻ തയ്യാറാണെങ്കിൽ—പഴയ രീതികൾ ഉപേക്ഷിക്കാനും പുതിയ രീതികളിലേക്ക് മാറാനും സമയമായിരിക്കുന്നു.