Bug: optimistic state (useOptimistic) shows both optimistic and returned from server data when running several async actions about react HOT 6 OPEN

Thank you for the comprehensive repro.

I reduced it a bit more and also added two potential workarounds that I highlighted in comments as "Alternate A" and "Alternate B" as well as one with (in my opinion) degraded UX in "Alternate C": https://stackblitz.com/edit/react-9vvm42?file=src%2FApp.js

First two clicks create just one pending update. Everything works fine.

Last click happens while the action from the prior click is still pending, creating this intermediate state where an item is both in the optimistic and non-optimistic slice.

I also added a test that repros the original issue: #28575

However, I'll double check with the team if this shouldn't have "just worked" as you authored it. If either of the workarounds are required, we should definitely document it. Especially since it's not quite clear to me how this would work with primitives e.g. incrementing an optimistic click counter.

from react.

FYI, This could be reproed in the official demo

from react.

@eps1lon Your "Alternate A" solution is pretty clear and works great.

However, I have a questions about "Alternate B" solution.
Why optimistic update function is called 3 times every time optimistic state is updated?

And how this solution work at all, I mean, how item can be inside non-optimistic state earlier optimistic version if we append it to optimistic version first? 🤔

from react.