CODEWITHSUNDEEP
javascriptreactjsnext.js
Youssouf Oumar
Youssouf Oumar

Reputation: 45893

Why is the component not being updated after changing object properties?

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>
  );
}

Upvotes: 3

Views: 3401

Answers (2)

Youssouf Oumar
Youssouf Oumar

Reputation: 45893

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 commented 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

Upvotes: 7

3limin4t0r
3limin4t0r

Reputation: 21120

Let me add a reference to the React useState documentation:

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

React will ignore your update if the next state is equal to the previous state, as determined by an Object.is comparison. This usually happens when you change an object or an array in state directly:

obj.x = 10;  // 🚩 Wrong: mutating existing object
setObj(obj); // 🚩 Doesn't do anything

You mutated an existing obj object and passed it back to setObj, so React ignored the update. To fix this, you need to ensure that you’re always replacing objects and arrays in state instead of mutating them:

// ✅ Correct: creating a new object
setObj({
  ...obj,
  x: 10
});

Upvotes: 0

Related Questions