Immutability

State trong một ứng dụng React cần phải immutable (xem thêm JS Data Types).

Cụ thể, khi cập nhật state, ta không thể thay đổi trực tiếp trên state hiện tại. Thay vào đó, ta cần tạo ra một bản sao có chứa những sự thay đổi và thay thế state cũ bằng bản sao đó.

Ví dụ, xét state sau:

const [person, setPerson] = useState({ name: "Aleister", age: 21 })

Thay vì chỉnh sửa trực tiếp trên state:

// ❌ Illegal - by default, this will mutate the state!
person.age = 22
 
setPerson(person)

Hãy tạo ra một bản sao và cập nhật giá trị ở trên bản sao đó:

// ✅ This is safe, because we made a copy
newPerson = {
  ...person,
  age: 22,
}
 
setPerson(newPerson)

Lý do cho tính chất này là vì React sử dụng phương thức Object.is (xem thêm JS Object Methods) để so sánh state ở hai lần render. Mà hai object chỉ được xem là khác nhau nếu chúng có tham chiếu khác nhau.