javascript / beginner
Snippet
Immutably Updating Object Fields in State
In JavaScript and React, objects are reference data types. To update state correctly without mutating the original object directly, create a shallow copy with the spread operator (...) and overwrite the specific property.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { useState } from 'react';export function UserProfile() {const [user, setUser] = useState({ name: 'Alex', age: 25 });const updateAge = () => {setUser(prevUser => ({...prevUser,age: prevUser.age + 1}));};return <button onClick={updateAge}>{user.name} is {user.age}</button>;}
react
Breakdown
1
const [user, setUser] = useState({ name: 'Alex', age: 25 });
Initializes state with an object data type containing user details.
2
setUser(prevUser => ({ ...prevUser, age: prevUser.age + 1 }));
Uses the previous state callback to return a new object with incremented age, preserving immutability.