ES2023 specification اب چار نئے array methods فراہم کرتی ہے—toSorted, toReversed, toSpliced اور with—جو اصل array کو تبدیل (mutate) کرنے کے بجائے نئی arrays واپس کرتے ہیں۔ React اور دیگر UI libraries میں، جو immutable state پر انحصار کرتی ہیں، یہ helpers ڈویلپرز کو ان spread-operator کے طریقوں سے آزاد کر دیتے ہیں جو طویل عرصے سے bugs اور boilerplate کا باعث رہے ہیں۔

اس تبدیلی کی اہمیت کیوں ہے

React یہ فیصلہ کرتا ہے کہ کسی component کو re-render کرنا ہے یا نہیں، اس کے لیے وہ پچھلی state reference کا نئی reference کے ساتھ موازنہ کرتا ہے۔ اگر reference تبدیل نہ ہو، تو React فرض کرتا ہے کہ کچھ بھی تبدیل نہیں ہوا۔ کلاسیکی Array.prototype.sort میتھڈ array کو وہیں (in place) ترتیب دیتا ہے اور وہی reference واپس کرتا ہے، اس لیے setTasks(prev => prev.sort(fn)) جیسا کال React کو اپ ڈیٹ سے بے خبر رکھتا ہے۔ UI پرانا ڈیٹا (stale data) دکھاتا رہتا ہے، یہ ایک ایسا bug ہے جو حقیقی پروجیکٹس میں اکثر نظر آتا ہے۔

ڈویلپرز اس مسئلے سے بچنے کے لیے پہلے array کو کلون کرتے تھے—عام طور پر spread operator کے ذریعے—تاکہ sorting کے مرحلے میں ایک نیا reference حاصل ہو سکے:

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

یہ طریقہ کام تو کرتا ہے، لیکن یہ کوڈ میں غیر ضروری پیچیدگی (noise) پیدا کرتا ہے اور اسے بھول جانا آسان ہے۔ نئے ES2023 methods اصل array کو غیر تبدیل شدہ رکھتے ہوئے ایک نیا array بنانے کا ایک براہ راست اور پڑھنے میں آسان طریقہ فراہم کرتے ہیں۔

چار non-mutating میتھڈز

  • toSorted(compareFn?) – یہ sort کی طرح کام کرتا ہے لیکن ایک ترتیب شدہ کاپی (sorted copy) واپس کرتا ہے۔ اصل array میں کوئی تبدیلی نہیں ہوتی۔
  • toReversed() – یہ reverse کی جگہ لیتا ہے۔ یہ ایک الٹی (reversed) کاپی فراہم کرتا ہے، جبکہ اصل ترتیب برقرار رہتی ہے۔
  • toSpliced(start, deleteCount, ...items) – یہ بغیر کسی side effects کے splice کی طرح کام کرتا ہے۔ واپس آنے والا array نئی شمولیت یا خاتمے کی عکاسی کرتا ہے، جبکہ اصل array وہی رہتا ہے۔
  • with(index, value) – یہ index پر موجود element کو value سے بدل دیتا ہے اور ایک نیا array واپس کرتا ہے۔ یہ map یا spread-operator کے ذریعے element بدلنے کے عام طریقے کا متبادل ہے۔

یہ چاروں میتھڈز ECMAScript standard کا حصہ ہیں اور موجودہ بڑے browsers اور 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));

array کو الٹا کرنا (Reversing an array)

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

ایک element کو ہٹانا (Removing an element)

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

نیا syntax اضافی spread operators یا mapping loops کی ضرورت کو ختم کر دیتا ہے، جس سے state updates کو پڑھنا آسان اور غلطیوں سے پاک ہو جاتا ہے۔

کون فائدہ اٹھائے گا اور کون ہچکچاہٹ کا شکار ہو سکتا ہے

Developers جو React, Vue, Redux, Zustand، یا کسی بھی ایسے framework کا استعمال کرتے ہیں جو immutable data structures کی توقع رکھتا ہے، انہیں ایک واضح ذہنی ماڈل (mental model) ملتا ہے: میتھڈ کو کال کریں، نیا array حاصل کریں، اور اسے setter کو دے دیں۔ Boilerplate میں کمی سے render cycles کے وقت میں بھی کچھ ملی سیکنڈز کی بچت ہو سکتی ہے، کیونکہ انجن sorting سے پہلے ایک درمیانی کاپی بنانے سے بچ جاتا ہے۔

Legacy browsers والی ٹیموں کو شاید polyfills شامل کرنے کی ضرورت پڑے۔ یہ میتھڈز Safari یا Internet Explorer کے پرانے ورژن میں موجود نہیں ہیں، اس لیے ایک production build جو ان پلیٹ فارمز کو ٹارگٹ کرتی ہے، اسے ایک fallback شامل کرنا ہوگا۔ اس سے bundle-size میں تھوڑا اضافہ ہوتا ہے، لیکن پڑھنے میں آسانی (readability) کے لیے یہ سودا اکثر فائدہ مند ہوتا ہے۔

Library authors کو نئی signatures ظاہر کرنے کے لیے type definitions (مثلاً TypeScript) کو اپ ڈیٹ کرنے کی ضرورت پڑ سکتی ہے۔ جب تک یہ definitions سرکاری @types packages میں نہیں آ جاتیں، ڈویلپرز کو عارضی طور پر type errors نظر آ سکتے ہیں۔

آگے کیا نظر آئے گا

  • Adoption metrics – ESLint جیسے ٹولز جلد ہی ایسے rules شامل کر سکتے ہیں جو state setters میں mutable array calls کو نشان زد (flag) کریں، تاکہ ڈویلپرز کو نئے میتھڈز کی طرف راغب کیا جا سکے۔
  • Performance studies – ابتدائی benchmarks سے پتہ چلتا ہے کہ native non-mutating methods، spread-operator کلون اور اس کے بعد ہونے والی mutable operation کے مقابلے میں تیز ہیں، لیکن حقیقی دنیا کا ڈیٹا اس کے اثر کو یقینی بنائے گا۔
  • مزید تجاویز (Further proposals) – ECMAScript کمیٹی immutable-by-default APIs کی تلاش جاری رکھے ہوئے ہے؛ آنے والے مراحل پر نظر رکھنے سے مزید ایسے helpers کا پتہ چل سکتا ہے جو اسی پیٹرن پر مبنی ہوں۔

خلاصہ (Takeaway)

تازہ ترین ECMAScript specification UI ڈویلپرز کو state کو immutable رکھنے کا ایک بلٹ ان اور مختصر طریقہ فراہم کرتا ہے، بغیر ان spread-operator کی جدوجہد کے جس نے بے شمار bugs پیدا کیے ہیں۔ sort, reverse, splice اور index-based replacements کو toSorted, toReversed, toSpliced اور with سے بدل کر، آپ React کے change detection کو اس کے اصل مقصد کے مطابق کام کرنے دیتے ہیں اور اپنے کوڈ کو پڑھنے میں آسان بناتے ہیں۔ اگر آپ کے ٹارگٹ browsers ان نئے میتھڈز کو سپورٹ کرتے ہیں—یا آپ انہیں polyfill کرنے کے لیے تیار ہیں—تو یہ پرانے طریقوں کو چھوڑنے اور زبان (language) کو اصل کام کرنے دینے کا وقت ہے۔