Memperbarui Objek dalam State

Apa itu mutasi?

Anda bisa menyimpan segala jenis nilai JavaScript di dalam state.

const [x, setX] = useState(0);

Sejauh ini Anda sudah bisa menggunakan angka, string, dan boolean. Nilai-nilai JavaScript tersebut bersifat “immutable”, yang berarti tidak bisa diubah atau “read-only”. Anda bisa memicu render ulang untuk menimpa sebuah nilai:

setX(5);

Nilai state x berubah dari 0 menjadi 5, tetapi angka 0 itu sendiri tidak berubah. Melakukan perubahan terhadap nilai-nilai primitif yang bawaan seperti angka, string, dan boolean itu mustahil di JavaScript.

Sekarang pikirkan sebuah objek dalam state:

const [position, setPosition] = useState({ x: 0, y: 0 });

Secara teknis, Anda bisa memperbarui isi konten objek itu sendiri. Hal ini disebut sebagai mutasi:

position.x = 5;

Tetapi, meskipun objek di React secara teknis bisa diubah, Anda harus memperlakukan mereka seolah-olah objek itu immutable—seperti angka, boolean, dan string. Selain melakukan mutasi, Anda seharusnya menimpa mereka.

Perlakukan state seperti read-only

Dengan kata lain, Anda seharusnya memperlakukan semua objek JavaScript yang ditaruh di dalam state seperti read-only.

Berikut adalah contoh kode yang menampung objek di dalam state untuk merepresentasikan posisi kursor saat ini. Titik merah tersebut seharusnya bergerak ketika Anda menyentuh layar atau kursor digerakkan pada daerah preview. Tetapi titik merah tersebut diam di tempat saja pada posisi awal:

Masalahnya terdapat pada potongan kode berikut.

onPointerMove={e => {
  position.x = e.clientX;
  position.y = e.clientY;
}}

Kode tersebut melakukan modifikasi objek yang ditempatkan ke position dari render sebelumnya. Tetapi tanpa menggunakan fungsi yang mengubah state, React tidak tahu bahwa objek tersebut telah berubah. Sehingga React tidak melakukan apa-apa. Hal ini sama seperti mencoba mengubah pesanan makanan setelah makanannya dihabiskan. Meskipun mengubah state bisa bekerja pada kasus tertentu, kami tidak menyarankannya. Anda harus memperlakukan nilai state yang aksesnya Anda miliki ketika render sebagai read-only.

Untuk memicu render ulang pada kasus ini, buatlah objek baru dan berikan objek tersebut kepada fungsi yang mengubah state:

onPointerMove={e => {
  setPosition({
    x: e.clientX,
    y: e.clientY
  });
}}

Dengan setPosition, Anda memberi tahu React:

• Timpa position dengan objek baru yang diberikan
• Lalu render komponen tersebut lagi

Perhatikan bahwa sekarang titik merah sudah mengikuti kursor Anda ketika Anda menyentuh layar atau menggerakkan kursor pada daerah preview:

position.x = e.clientX;
position.y = e.clientY;

const nextPosition = {};
nextPosition.x = e.clientX;
nextPosition.y = e.clientY;
setPosition(nextPosition);

setPosition({
  x: e.clientX,
  y: e.clientY
});

Menyalin objek-objek dengan sintaksis spread

Pada contoh sebelumnya, objek position selalu dibentuk ulang dari posisi kursor saat ini. Tetapi, pada umumnya, Anda ingin menyimpan data sebelumnya sebagai bagian dari objek baru yang sedang dibuat. Sebagai contoh, Anda ingin mengubah hanya satu data bidang pada sebuah formulir tanpa mengubah data-data sebelumnya pada bidang lainnya.

Bidang isian berikut tidak bekerja karena handler onChange mengubah state:

Sebagai contoh, baris ini mengubah state dari render sebelumnya:

person.firstName = e.target.value;

Cara yang dapat diandalkan untuk mendapatkan perilaku yang diinginkan adalah dengan membuat objek baru dan mengopernya ke setPerson. Tetapi di sini, Anda juga ingin menyalin data sebelumnya ke objek tersebut karena hanya satu bidang saja yang berubah:

setPerson({
  firstName: e.target.value, // Nama depan baru dari bidang isian
  lastName: person.lastName,
  email: person.email
});

Anda bisa menggunakan sintaksis ... spread objek agar Anda tidak perlu menyalin semua properti secara terpisah.

setPerson({
  ...person, // Salin properti-properti lama
  firstName: e.target.value // Tetapi perbarui properti yang ini
});

Sekarang formulirnya berfungsi!

Perhatikan bagaimana Anda tidak mendeklarasikan variabel state yang terpisah untuk setiap bidang isian. Untuk formulir yang besar, menyimpan semua data dalam sebuah objek sebagai satu kelompok merupakan hal yang mudah—selama objek tersebut diperbarui dengan benar!

Perhatikan bahwa ... sintaksis spread sebenarnya adalah “dangkal”—benda-benda yang disalin hanya sedalam satu level. Hal ini membuatnya cepat, tetapi itu juga berarti bahwa jika Anda ingin memperbarui properti yang bersarang, Anda harus menggunakannya lebih dari sekali.

import { useState } from 'react';

export default function Form() {
  const [person, setPerson] = useState({
    firstName: 'Barbara',
    lastName: 'Hepworth',
    email: 'bhepworth@sculpture.com'
  });

  function handleChange(e) {
    setPerson({
      ...person,
      [e.target.name]: e.target.value
    });
  }

  return (
    <>
      <label>
        Nama depan:
        <input
          name="firstName"
          value={person.firstName}
          onChange={handleChange}
        />
      </label>
      <label>
        Nama belakang:
        <input
          name="lastName"
          value={person.lastName}
          onChange={handleChange}
        />
      </label>
      <label>
        Email:
        <input
          name="email"
          value={person.email}
          onChange={handleChange}
        />
      </label>
      <p>
        {person.firstName}{' '}
        {person.lastName}{' '}
        ({person.email})
      </p>
    </>
  );
}

Memperbarui objek bersarang

Pikirkan sebuah objek bersarang dengan struktur sebagai berikut:

const [person, setPerson] = useState({
  name: 'Niki de Saint Phalle',
  artwork: {
    title: 'Blue Nana',
    city: 'Hamburg',
    image: 'https://i.imgur.com/Sd1AgUOm.jpg',
  }
});

Jika Anda ingin memperbarui person.artwork.city, jelas bagaimana melakukannya dengan mutasi:

person.artwork.city = 'New Delhi';

Tetapi dalam React, state itu diperlakukan sebagai immutable! Untuk mengubah city, pertama-tama Anda perlu membuat objek artwork yang baru (sudah terisi dengan data dari sebelumnya), kemudian buat objek person baru yang menunjuk ke artwork yang baru:

const nextArtwork = { ...person.artwork, city: 'New Delhi' };
const nextPerson = { ...person, artwork: nextArtwork };
setPerson(nextPerson);

Atau, ditulis sebagai satu panggilan fungsi:

setPerson({
  ...person, // Salin properti-properti lainnya
  artwork: { // tetapi timpa artwork
    ...person.artwork, // dengan artwork yang sama
    city: 'New Delhi' // tetapi di New Delhi!
  }
});

Ini menjadi agak bertele-tele, tetapi berfungsi dengan baik dalam banyak kasus:

let obj = {
  name: 'Niki de Saint Phalle',
  artwork: {
    title: 'Blue Nana',
    city: 'Hamburg',
    image: 'https://i.imgur.com/Sd1AgUOm.jpg',
  }
};

let obj1 = {
  title: 'Blue Nana',
  city: 'Hamburg',
  image: 'https://i.imgur.com/Sd1AgUOm.jpg',
};

let obj2 = {
  name: 'Niki de Saint Phalle',
  artwork: obj1
};

let obj1 = {
  title: 'Blue Nana',
  city: 'Hamburg',
  image: 'https://i.imgur.com/Sd1AgUOm.jpg',
};

let obj2 = {
  name: 'Niki de Saint Phalle',
  artwork: obj1
};

let obj3 = {
  name: 'Copycat',
  artwork: obj1
};

Menulis logika pembaruan yang ringkas dengan Immer

Jika state memiliki sarang yang dalam, mungkin Anda ingin mempertimbangkan untuk meratakannya. Tetapi, jika Anda tidak ingin mengubah struktur state, Anda mungkin lebih suka jalan pintas daripada spreads bersarang. Immer adalah library terkenal yang memungkinkan Anda menulis kode dengan sintaksis yang mudah tetapi melakukan mutasi dan mengurus proses penyalinan untuk Anda. Dengan Immer, kode yang ditulis terlihat seperti “melanggar peraturan” dan melakukan mutasi objek:

updatePerson(draft => {
  draft.artwork.city = 'Lagos';
});

Tetapi tidak seperti mutasi biasa, hal ini tidak menimpa state sebelumnya!

Untuk mencoba Immer:

1. Jalankan npm install use-immer untuk menambahkan Immer sebagai dependensi
2. Kemudian timpa import { useState } from 'react' dengan import { useImmer } from 'use-immer'

Berikut adalah contoh sebelumnya yang telah dikonversi menggunakan Immer:

Perhatikan bagaimana semua kode event handler menjadi lebih ringkas. Anda bisa mencampur dan mencocokkan useState dan useImmer dalam satu komponen sesuka hati Anda. Immer adalah cara yang bagus untuk menjaga agar handler logika pembaruan tetap ringkas, terutama jika ada objek bersarang di dalam state, dan penyalinan objek menyebabkan kode menjadi repetitif.