171 подписчик
Иммутабельность или неизменяемость состояния в ReactJS
Состояние может хранить любые значения, включая объекты. Но мы не должны изменять объекты, которые хранятся в состоянии React, напрямую. Вместо этого, когда мы хотим обновить объект, нам нужно создать новый, и использовать его для обновления состояния.
При работе с числами, строками и булевыми значениями, которые являются неизменными, мы просто обновляем состояние, например:
setName("Dmitriy")
при этом старое значение name заменяется на новое и происходит обновление компонента.
А как быть с объектами? Технически, можно изменить содержимое самого объекта. Это называется мутацией:
user.name = "Dmitriy"
но это не приведет к нужному эффекту. Мы должны относиться к ним как к неизменяемым, как к числам, булевым и строкам. Вместо того чтобы изменять их, мы всегда должны заменять их.
Надежный способ добиться нужного поведения — создать новый объект и передать его в setUser, при этом также копировать в него существующие данные, поскольку изменилось только одно поле name:
setUser({
...user, // Копируем все старые поля
name: e.target.value, // Заменяем значение в поле name
});
Около минуты
1 июля 2024