Creating data - React 18 Tutorial

React
1

In the Creating Data video of Connecting to the Backend, Mosh does this:

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

axios
  .post("https://jsonplaceholder.typicode.com/users", newUser)
  .then(({ data: savedUser }) => setUsers([savedUser, ...users]))
  .catch((err) => {
    setError(err.message);
    setUsers(originalUsers);
  });
};

Why is the new user being added to the state variable twice?
setUsers([newUser, ...users]);
setUsers([savedUser, ...users])

This doesn’t actually add it twice in practice but I think that is only because React updates state variables asynchronously.

Is this a mistake or am I missing something?

2

they are added twice but they have different id. Mosh used optimistic approach so setUsers([newUser, ...users]); is before the post method. while setUsers([savedUser, ...users]) is after post without error. Mosh mention that when you get back from server, it would have a unique id but its fake backend, it would be the same adding it at the end.

Try the test I did. put {user.id} next to the {user.name} in the <li>. In Network tab, change no throttling to 3G or slower. Then press the Add button. You will see that the id was first 0 then it changes into 11.