Die ES2023-Spezifikation liefert nun vier Array-Methoden – toSorted, toReversed, toSpliced und with – die neue Arrays zurückgeben, anstatt das Original zu mutieren. In React und anderen UI-Bibliotheken, die auf immutable State setzen, ermöglichen diese Helfer Entwicklern, die Spread-Operator-Tricks zu ersetzen, die schon lange eine Quelle für Bugs und Boilerplate-Code sind.

Warum die Änderung wichtig ist

React entscheidet, ob eine Komponente neu gerendert wird, indem es die Referenz des vorherigen States mit der neuen vergleicht. Wenn die Referenz unverändert bleibt, geht React davon aus, dass sich nichts geändert hat. Die klassische Methode Array.prototype.sort sortiert das Array in-place und gibt dieselbe Referenz zurück, sodass ein Aufruf wie setTasks(prev => prev.sort(fn)) React gegenüber dem Update blind macht. Die UI bleibt bei veralteten Daten hängen – ein Bug, der in realen Projekten viel zu oft auftritt.

Entwickler haben das Problem umgangen, indem sie das Array zuerst klonen – typischerweise mit dem Spread-Operator –, damit der Sortierschritt eine neue Referenz erzeugt:

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

Dieses Muster funktioniert zwar, erzeugt aber unnötigen Code (Noise) und ist leicht zu vergessen. Die neuen ES2023-Methoden bieten einen direkten, lesbaren Weg, ein neues Array zu erstellen, während das Original unberührt bleibt.

Die vier nicht-mutierenden Methoden

  • toSorted(compareFn?) – verhält sich wie sort, gibt aber eine sortierte Kopie zurück. Keine Änderung am Quell-Array.
  • toReversed() – ersetzt reverse. Es liefert eine umgekehrte Kopie und lässt die ursprüngliche Reihenfolge intakt.
  • toSpliced(start, deleteCount, ...items) – spiegelt splice ohne Seiteneffekte wider. Das zurückgegebene Array spiegelt das Einfügen oder Entfernen wider, das Quell-Array bleibt gleich.
  • with(index, value) – ersetzt das Element an der Position index durch value und gibt ein neues Array zurück. Es ersetzt das gängige Muster des Ersetzens mittels map oder Spread-Operator.

Alle vier Methoden sind Teil des ECMAScript-Standards und in aktuellen Versionen der gängigen Browser sowie in Node.js 20 verfügbar.

Wie der Code jetzt aussieht

Eine Liste sortieren

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

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

Ein einzelnes Element aktualisieren

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

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

Ein Array umkehren

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

Ein Element entfernen

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

Die neue Syntax macht zusätzliche Spread-Operatoren oder Mapping-Schleifen überflüssig, wodurch State-Updates leichter lesbar und weniger fehleranfällig werden.

Wer profitiert und wer zögern könnte

Entwickler, die React, Vue, Redux, Zustand oder ein anderes Framework verwenden, das unveränderliche (immutable) Datenstrukturen erwartet, gewinnen ein klareres mentales Modell: Methode aufrufen, neues Array erhalten, an den Setter zurückgeben. Die Reduzierung von Boilerplate kann auch einige Millisekunden bei den Render-Zyklen einsparen, da die Engine die Erstellung einer Zwischenkopie vor dem Sortieren vermeidet.

Teams mit Legacy-Browsern müssen möglicherweise Polyfills einbinden. Die Methoden sind in älteren Versionen von Safari oder Internet Explorer nicht vorhanden, daher muss ein Production-Build, der diese Plattformen unterstützt, einen Fallback bündeln. Das führt zu einem kleinen Nachteil bei der Bundle-Größe, aber der Kompromiss lohnt sich oft durch die Gewinnung an Lesbarkeit.

Bibliotheks-Autoren müssen möglicherweise die Typdefinitionen (z. B. TypeScript) aktualisieren, um die neuen Signaturen bereitzustellen. Bis diese Definitionen in den offiziellen @types-Paketen landen, können Entwickler vorübergehend Typpfehler sehen.

Was als Nächstes zu beachten ist

  • Adoptionsmetriken – Tooling wie ESLint könnte bald Regeln hinzufügen, die mutierende Array-Aufrufe in State-Settern markieren und Entwickler zu den neuen Methoden bewegen.
  • Performance-Studien – Erste Benchmarks deuten darauf hin, dass die nativen, nicht-mutierenden Methoden schneller sind als ein Klonen per Spread-Operator gefolgt von einer mutierenden Operation, aber reale Daten werden die Auswirkungen bestätigen.
  • Weitere Vorschläge – Das ECMAScript-Komitee untersucht weiterhin APIs, die standardmäßig immutable sind; die Beobachtung kommender Phasen könnte weitere Helfer offenbaren, die demselben Muster folgen.

Fazit

Die neueste ECMAScript-Spezifikation bietet UI-Entwicklern eine integrierte, prägnante Möglichkeit, den State immutable zu halten, ohne die Spread-Operator-Akrobatik, die unzählige Bugs verursacht hat. Indem Sie sort, reverse, splice und indexbasierte Ersetzungen durch toSorted, toReversed, toSpliced und with ersetzen, lassen Sie die Change-Detection von React wie vorgesehen arbeiten und machen Ihren Code leichter lesbar. Wenn Ihre Zielbrowser die neuen Methoden unterstützen – oder Sie bereit sind, sie zu polyfillen – ist es an der Zeit, die alten Muster abzulegen und die Sprache die schwere Arbeit erledigen zu lassen.