# React State During Update

**URL:** <https://forum.codewithmosh.com/t/react-state-during-update/20524>\
**Category:** React\
**Created:** [May 30, 2023, 12:00am UTC](https://forum.codewithmosh.com/t/react-state-during-update/20524 "2023-05-30T00:00:02Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![BlotCoo](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/blotcoo/32/5976_2.png) [@BlotCoo](https://forum.codewithmosh.com/u/BlotCoo)\
**Post date:** [May 30, 2023, 12:00am UTC](https://forum.codewithmosh.com/t/react-state-during-update/20524/1 "2023-05-30T00:00:02Z")

</div>

In one of the beginning React tutorials we’re updating a list of users optimistically and then using `axios` to POST a new user. Here’s the code in question:

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

    axios
      .post("https://jsonplaceholder.typicode.com/users", newUser)
      .then((res) => setUsers([res.data, ...users]));
  };

```

So we call `setUsers([newUser, ...users]);` to update the list optimistically, then call `axios.post`, and then call `setUsers(...)` again. My question is why isn’t there a duplicate user in the list? I would think after the first `setUsers` that we’d have the `mosh` user in the list, then on the result of the POST we add the user (`res.data`) _again_ to the list so there would be two `mosh` users, yet only one is in the list.

---

<div class="post-metadata">

**Author:** ![djb160](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/djb160/32/4881_2.png) [@djb160](https://forum.codewithmosh.com/u/djb160)\
**Post date:** [May 30, 2023, 4:19am UTC](https://forum.codewithmosh.com/t/react-state-during-update/20524/3 "2023-05-30T04:19:36Z")

</div>

From my understanding of it, the first setUsers() is your optimistic State. You just set frontend users list. It never goes to the backend.

Then you’re making the backend POST. Once that successfully completes, the next setUsers() call is essentially overwriting the current users list with the results from the POST.

Does that help?

---

<div class="post-metadata">

**Author:** ![BlotCoo](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/blotcoo/32/5976_2.png) [@BlotCoo](https://forum.codewithmosh.com/u/BlotCoo)\
**Post date:** [May 30, 2023, 1:38pm UTC](https://forum.codewithmosh.com/t/react-state-during-update/20524/4 "2023-05-30T13:38:15Z")

</div>

When the first call to `setUsers([newUser, ...users])` happens, `newUser` is prepended to the current list of users in React state. It doesn’t go to the backend since we’re not making any kind of HTTP request with it. It’s stored in state handled by React which is what is reflected in the UI.

When the POST request is made the server response returns just that one user that was created on the server, not a list. So the `setUsers([res.data, ...users])` prepends `res.data` to the list stored by the state in React, which is where I’m confused. I would have thought the current list in state contains `newUser`, which was prepended earlier, which would include the same `User` object as `res.data`, minus the new `id` that the server added. It seems like the function retains a reference to the initial `users` list rather than the list after adding `newUser`.

---

<div class="post-metadata">

**Author:** ![SAM](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/sam/32/167_2.png) [@SAM](https://forum.codewithmosh.com/u/SAM)\
**Post date:** [May 30, 2023, 8:38pm UTC](https://forum.codewithmosh.com/t/react-state-during-update/20524/5 "2023-05-30T20:38:55Z")

</div>

> [@BlotCoo](#):
>
> It seems like the function retains a reference to the initial `users` list

I think you’re right. I didn’t find the time yet to investigate that further but currently I believe the arrow function passed to `.then()` and the `users` array form a [closure](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures#closure).

---

<div class="post-metadata">

**Author:** ![BlotCoo](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/blotcoo/32/5976_2.png) [@BlotCoo](https://forum.codewithmosh.com/u/BlotCoo)\
**Post date:** [June 2, 2023, 1:39am UTC](https://forum.codewithmosh.com/t/react-state-during-update/20524/6 "2023-06-02T01:39:02Z")

</div>

From what I’ve been able to find it does sound like the behavior of a stale closure. Sounds like this is usually undesired behavior but in this case it works to our advantage.