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

ES2023 விவரக்குறிப்பு இப்போது நான்கு புதிய array முறைகளை வழங்குகிறது—toSorted, toReversed, toSpliced மற்றும் with—இவை அசல் array-வை மாற்றியமைப்பதற்குப் பதிலாக புதிய array-களைத் திருப்பித் தருகின்றன. React மற்றும் immutable state-ஐச் சார்ந்திருக்கும் பிற UI நூலகங்களில் (libraries), இந்த உதவியாளர்கள் (helpers), நீண்டகாலமாக பிழைகளுக்கும் தேவையற்ற கூடுதல் குறியீடுகளுக்கும் (boilerplate) காரணமாக இருந்த spread-operator தந்திரங்களுக்குப் பதிலாகப் பயன்படுத்தப்படலாம்.

இந்த மாற்றம் ஏன் முக்கியமானது

React ஒரு component-ஐ மீண்டும் உருவாக்க வேண்டுமா (re-render) என்பதை, முந்தைய state reference-ஐ புதியதுடன் ஒப்பிடுவதன் மூலம் தீர்மானிக்கிறது. Reference மாறவில்லை என்றால், எதுவும் மாறவில்லை என்று React கருதுகிறது. வழக்கமான Array.prototype.sort முறை அசல் array-லேயே மாற்றங்களைச் செய்து அதே reference-ஐத் திருப்பித் தருகிறது, எனவே setTasks(prev => prev.sort(fn)) போன்ற அழைப்புகள் மாற்றத்தை React கண்டறிய விடாமல் செய்கின்றன. இதனால் UI பழைய தரவிலேயே (stale data) தங்கிவிடுகிறது; இது நிஜத் திட்டங்களில் அடிக்கடி நிகழும் ஒரு பிழையாகும்.

டெவலப்பர்கள் முதலில் array-ஐ நகலெடுத்து (cloning)—பொதுவாக spread operator மூலம்—அதைச் சரிசெய்ய முயன்றனர், இதனால் sorting செய்யும் போது ஒரு புதிய reference உருவாகும்:

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

இந்த முறை வேலை செய்யும், ஆனால் இது குறியீட்டைச் சிக்கலாக்குகிறது மற்றும் எளிதில் மறக்கக்கூடியது. புதிய ES2023 முறைகள், அசல் array-வை மாற்றாமல் ஒரு புதிய array-ஐ உருவாக்கும் நேரடியான மற்றும் எளிதில் வாசிக்கக்கூடிய வழியை வழங்குகின்றன.

மாற்றியமைக்காத நான்கு முறைகள்

• toSorted(compareFn?) – sort-ஐப் போலவே செயல்படும், ஆனால் வரிசைப்படுத்தப்பட்ட நகலை (sorted copy) வழங்கும். அசல் array-வில் எந்த மாற்றமும் இருக்காது.
• toReversed() – reverse-க்கு மாற்றாக அமைகிறது. இது அசல் வரிசையை அப்படியே வைத்துக்கொண்டு, தலைகீழாக மாற்றப்பட்ட நகலை வழங்கும்.
• toSpliced(start, deleteCount, ...items) – பக்க விளைவுகள் (side effects) இன்றி splice-ஐப் போலவே செயல்படும். இது சேர்க்கப்பட்ட அல்லது நீக்கப்பட்ட மாற்றங்களுடன் கூடிய புதிய array-ஐ வழங்கும், அசல் அப்படியே இருக்கும்.
• with(index, value) – index-ல் உள்ள உறுப்பை value-ஆல் மாற்றிவிட்டு புதிய array-ஐ வழங்கும். இது map அல்லது spread-operator மூலம் உறுப்புகளை மாற்றும் பொதுவான முறைக்கு மாற்றாக அமைகிறது.

இந்த நான்கு முறைகளும் ECMAScript தரநிலையின் ஒரு பகுதியாகும் மற்றும் தற்போதைய முக்கிய பிரவுசர்கள் மற்றும் Node.js 20 பதிப்புகளில் கிடைக்கின்றன.

குறியீடு இப்போது எப்படி இருக்கும்

பட்டியலை வரிசைப்படுத்துதல்

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

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

ஒரு தனி உறுப்பைத் புதுப்பித்தல்

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

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

ஒரு array-வை தலைகீழாக்குதல்

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

ஒரு உறுப்பை நீக்குதல்

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

புதிய தொடரியல் (syntax), கூடுதல் spread operators அல்லது mapping loops-களின் தேவையை நீக்குகிறது, இதனால் state updates-களை எளிதாக வாசிக்கவும் பிழைகளைக் குறைக்கவும் முடிகிறது.

யார் பயனடைவார்கள் மற்றும் யார் தயங்கலாம்

React, Vue, Redux, Zustand அல்லது immutable data structures-ஐ எதிர்பார்க்கும் எந்தவொரு framework-ஐப் பயன்படுத்தும் டெவலப்பர்களும் தெளிவான புரிதலைப் பெறுவார்கள்: ஒரு முறையை (method) அழைக்கவும், புதிய array-ஐப் பெறவும், அதை setter-க்கு அனுப்பவும். இந்தத் தேவையற்ற கூடுதல் குறியீடுகள் (boilerplate) குறைவதால், render cycles-ன் நேரமும் சில மில்லி விநாடிகள் குறையக்கூடும், ஏனெனில் engine வரிசைப்படுத்துவதற்கு முன் ஒரு இடைநிலை நகலை (intermediate copy) உருவாக்குவதைத் தவிர்க்கிறது.

பழைய பிரவுசர்களைப் (legacy browsers) பயன்படுத்தும் குழுக்கள் polyfills-களைச் சேர்க்க வேண்டியிருக்கலாம். இந்த முறைகள் Safari அல்லது Internet Explorer-ன் பழைய பதிப்புகளில் இல்லை, எனவே அந்தத் தளங்களைக் குறிவைக்கும் production build-ல் ஒரு fallback முறையைச் சேர்க்க வேண்டும். இது bundle-size-ல் சிறிய அதிகரிப்பை ஏற்படுத்தினாலும், வாசிப்புத் திறனுக்காக (readability) இந்தத் தியாகம் பெரும்பாலும் பயனுள்ளதாக இருக்கும்.

Library உருவாக்குநர்கள் புதிய முறைகளை வெளிப்படுத்த type definitions (எ.கா., TypeScript) புதுப்பிக்க வேண்டியிருக்கலாம். அந்த வரையறைகள் அதிகாரப்பூர்வ @types தொகுப்புகளில் வரும் வரை, டெவலப்பர்கள் தற்காலிகமான type errors-களைக் காணலாம்.

அடுத்து எதைக் கவனிக்க வேண்டும்

• பயன்பாட்டு அளவீடுகள் (Adoption metrics) – ESLint போன்ற கருவிகள் விரைவில் state setters-ல் மாற்றக்கூடிய (mutable) array அழைப்புகளைக் கண்டறிந்து, டெவலப்பர்களைப் புதிய முறைகளை நோக்கித் தூண்டும் விதமான விதிகளை (rules) சேர்க்கலாம்.
• செயல்திறன் ஆய்வுகள் (Performance studies) – ஆரம்பகால பெஞ்ச்மார்க் முடிவுகள், native non-mutating முறைகள் spread-operator மூலம் நகலெடுத்துவிட்டுச் செய்யும் செயல்பாடுகளை விட வேகமானவை என்று தெரிவிக்கின்றன, ஆனால் நிஜ உலகத் தரவுகள் இதன் தாக்கத்தை உறுதிப்படுத்தும்.
• கூடுதல் முன்மொழிவுகள் (Further proposals) – ECMAScript குழு தொடர்ந்து immutable-by-default APIs-களை ஆராய்ந்து வருகிறது; வரவிருக்கும் நிலைகளைக் கவனிப்பதன் மூலம் இதே போன்ற முறையிலான கூடுதல் உதவியாளர்களைக் கண்டறியலாம்.

சுருக்கம்

சமீபத்திய ECMAScript விவரக்குறிப்பு, UI டெவலப்பர்களுக்கு spread-operator தந்திரங்கள் இன்றி, state-ஐ மாற்ற முடியாததாக (immutable) வைத்திருப்பதற்கான ஒரு உள்ளமைக்கப்பட்ட, சுருக்கமான வழியை வழங்குகிறது. sort, reverse, splice மற்றும் index-அடிப்படையிலான மாற்றங்களுக்குப் பதிலாக toSorted, toReversed, toSpliced மற்றும் with-ஐப் பயன்படுத்துவதன் மூலம், React-ன் மாற்றங்களைக் கண்டறியும் வசதி (change detection) சரியாகச் செயல்படுவதை உறுதி செய்யலாம் மற்றும் உங்கள் குறியீட்டை எளிதாக வாசிக்கச் செய்யலாம். உங்கள் இலக்கு பிரவுசர்கள் புதிய முறைகளை ஆதரித்தால்—அல்லது நீங்கள் அவற்றை polyfill செய்யத் தயாராக இருந்தால்—பழைய முறைகளைத் தவிர்த்துவிட்டு மொழியின் வசதிகளைப் பயன்படுத்த வேண்டிய நேரம் இது.