Materi
State boleh berisi objek dan larik, tetapi isinya diperlakukan hanya-baca. Mengubah isinya langsung, misalnya pelanggan.poin += 10 atau keranjang.push(barang), disebut mutasi. Tanpa fungsi set, React tidak tahu ada yang berubah. Memanggil set dengan objek yang sama setelah dimutasi juga tidak menolong: React membandingkan nilai lama dan baru dengan Object.is, menganggap objek yang sama tidak berubah, dan melewati render ulang.
Cara yang benar adalah membuat objek atau larik baru lalu mengirimkannya ke set. Untuk objek, salin isinya dengan spread, lalu timpa properti yang berubah: setPelanggan({ ...pelanggan, kota: "Bandung" }). Spread hanya menyalin satu tingkat, jadi objek bersarang perlu disalin di setiap tingkat yang berubah.
| Tujuan | Hindari (mengubah larik) | Pakai (larik baru) |
|---|---|---|
| Menambah | push, unshift | [...larik, baru] |
| Menghapus | pop, shift, splice | filter, slice |
| Mengganti item | splice, larik[i] = … | map |
| Mengurutkan | sort, reverse | salin dulu: [...larik].sort(…) |
setPesanan([...pesanan, { id: 7, menu: "Gado-gado" }]);
setPesanan(pesanan.filter((p) => p.id !== 3));
setPesanan(pesanan.map((p) => (p.id === 5 ? { ...p, siap: true } : p)));Menyalin larik tidak menyalin objek di dalamnya. Larik [...pesanan] berisi objek-objek yang sama dengan larik asal, sehingga mengubah salah satu objek lewat salinan ikut mengubah larik asal. Item yang berubah diganti objek baru, seperti di baris map di atas.
