מפרט ES2023 כולל כעת ארבע מתודות מערך—toSorted, toReversed, toSpliced ו-with—המחזירות מערכים חדשים במקום לשנות (mutate) את המקור. ב-React ובספריות UI אחרות המסתמכות על state בלתי ניתן לשינוי (immutable), העזרים הללו מאפשרים למפתחים להחליף את טריקי ה-spread operator שהיו במשך זמן רב מקור לבאגים ולקוד חזרתי (boilerplate).

למה השינוי הזה חשוב

React מחליטה אם לבצע רינדור מחדש (re-render) לרכיב על ידי השוואת ה-reference של ה-state הקודם עם החדש. אם ה-reference לא השתנה, React מניחה ששום דבר לא השתנה. המתודה הקלאסית Array.prototype.sort ממיינת את המערך במקום (in place) ומחזירה את אותו ה-reference, לכן קריאה כמו setTasks(prev => prev.sort(fn)) משאירה את React "עיוורת" לעדכון. ה-UI נשאר תקוע על נתונים מיושנים (stale data), באג שמופיע לעיתים קרובות מדי בפרויקטים אמיתיים.

מפתחים עקפו את הבעיה על ידי שכפול המערך תחילה—בדרך כלל באמצעות ה-spread operator—כך ששלב המיון מייצר reference חדש:

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

התבנית הזו עובדת, אך היא מוסיפה רעש וקל לשכוח אותה. המתודות החדשות של ES2023 מספקות דרך ישירה וקריאה ליצור מערך חדש תוך שמירה על המקור ללא שינוי.

ארבע המתודות הלא-משנות (non-mutating)

  • toSorted(compareFn?) – מתנהגת כמו sort אך מחזירה עותק ממוין. ללא שינוי במערך המקור.
  • toReversed() – מחליפה את reverse. היא מחזירה עותק הפוך, תוך שמירה על הסדר המקורי.
  • toSpliced(start, deleteCount, ...items) – משקפת את splice ללא side effects. המערך המוחזר משקף את ההכנסה או ההסרה, בעוד המקור נשאר זהה.
  • with(index, value) – מחליפה את האיבר ב-index ב-value ומחזירה מערך חדש. היא מחליפה את התבנית הנפוצה של 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));

היפוך מערך

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

הסרת איבר

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

התחביר החדש מסיר את הצורך ב-spread operators נוספים או בלולאות mapping, מה שהופך את עדכוני ה-state לקלים יותר לקריאה ופחות מועדים לשגיאות.

מי מרוויח ומי עשוי להסס

מפתחים המשתמשים ב-React, Vue, Redux, Zustand, או בכל framework שמצפה למבני נתונים immutable, מקבלים מודל מחשבתי ברור יותר: קוראים למתודה, מקבלים מערך חדש, ומעבירים אותו ל-setter. הצמצום ב-boilerplate יכול גם לחסוך כמה מילישניות במחזורי הרינדור, מכיוון שהמנוע נמנע מיצירת עותק ביניים לפני המיון.

צוותים עם דפדפנים ישנים (legacy) עשויים להזדקק ל-polyfills. המתודות אינן קיימות בגרסאות ישנות של Safari או Internet Explorer, לכן build של ייצור (production) שמטרתו פלטפורמות אלו חייב לכלול fallback. זה מוסיף עונש קטן לגודל ה-bundle, אך התמורה היא לרוב בשיפור הקריאות.

יוצרי ספריות עשויים להזדקק לעדכון הגדרות הטיפוסים (למשל, TypeScript) כדי לחשוף את החתימות החדשות. עד שההגדרות הללו יגיעו לחבילות ה-@types הרשמיות, מפתחים עשויים לראות שגיאות טיפוס זמניות.

מה כדאי לעקוב אחריו בהמשך

  • מדדי אימוץ (Adoption metrics) – כלים כמו ESLint עשויים להוסיף בקרוב חוקים שמסמנים קריאות למערכים משתנים (mutable) בתוך state setters, ובכך לדחוף מפתחים לכיוון המתודות החדשות.
  • מחקרים על ביצועים – בדיקות ביצועים ראשוניות מצביעות על כך שהמתודות ה-native הלא-משנות מהירות יותר משכפול באמצעות spread operator ולאחריו פעולה משתנה (mutable), אך נתונים מהעולם האמיתי יאשרו את ההשפעה.
  • הצעות נוספות – ועדת ECMAScript ממשיכה לחקור APIs שהם immutable כברירת מחדל; מעקב אחר שלבים עתידיים עשוי לחשוף עוזרים נוספים שמתאימים לאותו דפוס.

שורה תחתונה

מפרט ה-ECMAScript האחרון מעניק למפתחי UI דרך מובנית ותמציתית לשמור על state immutable ללא ה"אקרובטיקה" של ה-spread operator שגרמה לאין ספור באגים. על ידי החלפת sort, reverse, splice והחלפות מבוססות אינדקס ב-toSorted, toReversed, toSpliced ו-with, אתם מאפשרים למנגנון זיהוי השינויים של React לעבוד כמצופה והופכים את הקוד שלכם לקל יותר לקריאה. אם הדפדפנים שלכם תומכים במתודות החדשות — או שאתם מוכנים להשתמש ב-polyfill — הגיע הזמן לפרוש את התבניות הישנות ולאפשר לשפה לעשות את העבודה הקשה.