React 18 for Beginners > Connecting to the Backend > Creating Data

It got me confused a little bit on how this line does not add the user to the state twice.

Inspecting the code on my local I see that when hitting the first setUsers we add the user with id 0 to the state. We then send the POST request and upon response we call setUsers again this time with the new id. What happens is that the user with id of 0 gets updated to user with new id. How does this occur?

I would expect the code to be as following and cannot understand how the current version works.

const addUser = () => {
  const originalUsers = [...users];
  const newUser = { id: 0, name: "Mosh" };
  setUsers([newUser, ...users]);

  userService
    .create(newUser)
    .then(({ data: savedUser }) => setUsers([savedUser, /* ATTENTION this part --->*/...originalUsers]))
    .catch((err) => {
      setError(err.message);
      setUsers(originalUsers);
    });
};