There are other Stack Overflow threads that are kind of related to this question, but very briefly answered. They say, "Use the spread operator". But why?

In the below code, I'm updating upon clicking the firstName property of the user object, which is a state, but nothing is happening. Why is that?

export default function App() {
  const [user, setUser] = useState({
    firstName: "Jhon",
    lastName: "Doe",
  });
  const changeFirstName = () => {
    const newUser = user;
    newUser.firstName = "David";
    setUser(newUser);
  };
  return (
    <div>
      <div>
        <p>First Name: {user.firstName}</p>
        <p>Last Name: {user.lastName}</p>
      </div>
      <button onClick={changeFirstName}>Change First Name</button>
    </div>
  );
}

There are other Stack Overflow threads that are kind of related to this question, but very briefly answered. They say, "Use the spread operator". But why?

In the below code, I'm updating upon clicking the firstName property of the user object, which is a state, but nothing is happening. Why is that?

export default function App() {
  const [user, setUser] = useState({
    firstName: "Jhon",
    lastName: "Doe",
  });
  const changeFirstName = () => {
    const newUser = user;
    newUser.firstName = "David";
    setUser(newUser);
  };
  return (
    <div>
      <div>
        <p>First Name: {user.firstName}</p>
        <p>Last Name: {user.lastName}</p>
      </div>
      <button onClick={changeFirstName}>Change First Name</button>
    </div>
  );
}

• javascript
• reactjs
• next.js

2 Answers 2

React won't update the DOM every time you give the same state to a setState. For primitive values like Number, String, and Boolean, it's obvious to know whether we are giving a different value or not.

For referenced values like Object and Array, on the other hand, changing their content doesn't flag them as different. It should be a different memory reference. See your mented code to understand what you are doing wrong:

const newUser = user;        // does a reference copy, means newUser === user
newUser.firstName = "David"; // changes its content, but still newUser === user
setUser(newUser);            // at this point, it's like nothing has changed

A solution could be the spread operator, which will create a copy of your existing object but on a new memory reference, and then you overwrite the properties that you want to change:

const newUser = {...user, firstName: "David"}; // creates a copy of user on a new reference and updates its firstName field
setUser(newUser);                              // new reference is given to setUser

Let me add a reference to the React useState documentation:

I’ve updated the state, but the screen doesn’t update