3

Could someone please explain the difference between this:

const arr = users;

arr.push({ firstName, email })

setUsers((prevState) => arr)

and this:

setUsers(prevState => [...prevState, { firstName, email }])
Phil
  • 157,677
  • 23
  • 242
  • 245
sharif_17
  • 45
  • 3
  • 3
    The difference is that `arr === users` but `[ ...users] !== users`. Which means in the first case, when React does that exact comparison, nothing has changed and so the DOM isn't updated properly. But in the second case, React is dealing with a new array, so it works as intended. Note if you do `const arr = users;`, pushing to `arr` also pushes to `users` because you *didn't create a copy*, just a new way to reference the *single existing array*. –  Apr 20 '22 at 06:12

2 Answers2

3

The answer is references and object equality...

Array.prototype.push() mutates the array in place meaning its object reference does not change.

const prevState = [1,2,3];
const nextState = prevState;
nextState.push(4);
nextState === prevState; // true

[...prevState, { firstName, email }] creates a new array which is not equal to prevState.

const prevState = [1,2,3];
const nextState = [...prevState, 4];
nextState === prevState; // false

As per React's state change detection rules...

Bailing out of a dispatch

If you return the same value from a Reducer Hook as the current state, React will bail out without rendering the children or firing effects. (React uses the Object.is comparison algorithm.)

Using .push() and updating the state to the same value means React will bail out of the re-render and you won't see changes made.

users.push({
  firstName: "Bob",
  email: "bob@example.com"
});
setUsers(users);

Edit lucid-williamson-21sejq

Create a new array and the changes are made visible

setUsers((prev) => [
  ...prev,
  {
    firstName: "Bob",
    email: "bob@example.com"
  }
]);

Edit keen-napier-hk5m5i

Phil
  • 157,677
  • 23
  • 242
  • 245
0

In the first case you mutate the reference arr adding a user. In the second case you create a completely new array copying all the data from the old one plus adding the new user.

You should use the second case as react compares the state using Object.is, which in case of your first case would return true as the reference has not changed even if added a new user and therefore ui would not be updated.

2jt
  • 93
  • 5