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

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

const [user, setUser] = useState({ name: 'Alex', age: 25 });

Initializes state with an object data type containing user details.

setUser(prevUser => ({ ...prevUser, age: prevUser.age + 1 }));

Uses the previous state callback to return a new object with incremented age, preserving immutability.

Previous snippet Next snippet

More Beginner JavaScript exercises →

Immutably Updating Object Fields in State

Related