Spesifikasi ES2023 kini menyertakan empat metode array—toSorted, toReversed, toSpliced dan with—yang mengembalikan array baru alih-alih mengubah (mutating) array aslinya. Dalam React dan library UI lainnya yang mengandalkan state yang tidak dapat diubah (immutable state), helper ini memungkinkan developer menggantikan trik spread-operator yang selama ini menjadi sumber bug dan boilerplate.

Mengapa perubahan ini penting

React memutuskan apakah akan me-render ulang sebuah komponen dengan membandingkan referensi state sebelumnya dengan yang baru. Jika referensinya tidak berubah, React mengasumsikan tidak ada yang berubah. Metode klasik Array.prototype.sort mengurutkan array di tempat (in place) dan mengembalikan referensi yang sama, sehingga pemanggilan seperti setTasks(prev => prev.sort(fn)) membuat React tidak menyadari adanya pembaruan. UI tetap tertahan pada data lama (stale data), sebuah bug yang sangat sering muncul di proyek nyata.

Developer telah menyiasati masalah ini dengan mengkloning array terlebih dahulu—biasanya dengan spread operator—sehingga langkah pengurutan menghasilkan referensi baru:

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

Pola tersebut berhasil, tetapi menambah kerumitan (noise) dan mudah terlupakan. Metode ES2023 yang baru memberikan cara yang langsung dan mudah dibaca untuk menghasilkan array baru sambil menjaga array asli tetap utuh.

Empat metode non-mutating

  • toSorted(compareFn?) – berperilaku seperti sort tetapi mengembalikan salinan yang sudah diurutkan. Tidak ada perubahan pada array sumber.
  • toReversed() – menggantikan reverse. Menghasilkan salinan yang dibalik, membiarkan urutan asli tetap utuh.
  • toSpliced(start, deleteCount, ...items) – meniru splice tanpa efek samping (side effects). Array yang dikembalikan mencerminkan penyisipan atau penghapusan, sementara sumbernya tetap sama.
  • with(index, value) – mengganti elemen pada index dengan value dan mengembalikan array baru. Ini menggantikan pola umum penggunaan map atau penggantian elemen dengan spread-operator.

Keempat metode tersebut adalah bagian dari standar ECMAScript dan tersedia di versi terbaru browser utama serta Node.js 20.

Seperti apa kodenya sekarang

Mengurutkan daftar

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

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

Memperbarui item tunggal

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

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

Membalikkan array

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

Menghapus elemen

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

Sintaks baru ini menghilangkan kebutuhan akan spread operator tambahan atau loop mapping, membuat pembaruan state lebih mudah dibaca dan lebih sedikit risiko kesalahan (less error-prone).

Siapa yang diuntungkan dan siapa yang mungkin ragu

Developer yang menggunakan React, Vue, Redux, Zustand, atau framework apa pun yang mengharapkan struktur data immutable akan mendapatkan model mental yang lebih jelas: panggil metode, dapatkan array baru, berikan kembali ke setter. Pengurangan boilerplate juga dapat memangkas beberapa milidetik dari siklus render, karena engine menghindari pembuatan salinan perantara sebelum pengurutan.

Tim dengan browser lama (legacy browsers) mungkin perlu menyertakan polyfill. Metode ini tidak tersedia di versi lama Safari atau Internet Explorer, sehingga build produksi yang menargetkan platform tersebut harus menyertakan fallback. Hal ini menambah sedikit beban ukuran bundle, tetapi pertukarannya sering kali sepadan dengan peningkatan keterbacaan.

Pembuat library mungkin perlu memperbarui definisi tipe (misalnya, TypeScript) untuk mengekspos tanda tangan (signature) baru tersebut. Sampai definisi tersebut masuk ke paket @types resmi, developer mungkin akan melihat error tipe sementara.

Apa yang perlu diperhatikan selanjutnya

  • Metrik adopsi – alat seperti ESLint mungkin akan segera menambahkan aturan yang menandai pemanggilan array yang bersifat mutable dalam state setter, mendorong developer menuju metode yang baru.
  • Studi performa – benchmark awal menunjukkan bahwa metode non-mutating bawaan lebih cepat daripada kloning dengan spread-operator yang diikuti oleh operasi mutable, tetapi data dunia nyata akan mengonfirmasi dampaknya.
  • Proposal lebih lanjut – komite ECMAScript terus mengeksplorasi API yang bersifat immutable-by-default; memperhatikan tahapan mendatang dapat mengungkap lebih banyak helper yang mengikuti pola yang sama.

Kesimpulan

Spesifikasi ECMAScript terbaru memberikan cara bawaan dan ringkas bagi developer UI untuk menjaga state tetap immutable tanpa perlu melakukan kerumitan spread-operator yang telah menyebabkan bug tak terhitung jumlahnya. Dengan mengganti sort, reverse, splice, dan penggantian berbasis indeks dengan toSorted, toReversed, toSpliced, dan with, Anda membiarkan deteksi perubahan React bekerja sebagaimana mestinya dan membuat kode Anda lebih mudah dibaca. Jika browser target Anda mendukung metode baru ini—atau Anda bersedia menggunakan polyfill—sudah waktunya untuk meninggalkan pola lama dan membiarkan bahasa pemrograman melakukan pekerjaan beratnya.