Реактивность объектов в React

Объекты в React также обладают реактивностью. Это значит, что при любых изменениях объектов, эти изменения сразу же будут отображаться на экране.

Также, как и при работе с массивами, изменения объектов следует производить иммутабельно, то есть не изменяя исходного объекта. Давайте посмотрим на примере. Пусть в стейте obj хранится объект:

function App() {
const [obj, setObj] = useState({
prop1: 'value1',
prop2: 'value2',
prop3: 'value3',
});

return <div>
<span>{obj.prop1}</span>,
<span>{obj.prop2}</span>,
<span>{obj.prop3}</span>
</div>;
}
Давайте изменим значение какого-либо из свойств нашего объекта.

Для этого можно выполнить изменения в копии объекта:

const copy = Object.assign({}, obj);
copy.prop1 = '!';
setObj(copy);
А можно воспользоваться деструктуризацией:

setObj({...obj, ...{prop1: '!'}});