New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Bug: optimistic state (useOptimistic) shows both optimistic and returned from server data when running several async actions #28574
Comments
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. Screencast.from.18.03.2024.11.01.08.webmI 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. |
FYI, This could be reproed in the official demo optimistic.mov |
@eps1lon Your "Alternate A" solution is pretty clear and works great. However, I have a questions about "Alternate B" solution. 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? 🤔 |
When an action completes, we rebase the optimistic updates (i.e. replay) on top of the passthrough value (the non-optimistic state). That's why you see multile calls. |
@eps1lon thank you for the explanation.
Could you throw the light on the question above? |
Because we added it to the non-optimistic slice but it's still in the optimistic slice because one action is still pending. |
I have a form with submit button. When I click on the button, I call update optimistic state and update real state as soon as action is finished. When I click on the button 3 times, I will see 6 items in the list for a while.
Issue.Demo.mp4
React version:
Steps To Reproduce
Link to repository:
https://github.com/acherkashin/react19-useOptimistic
Link to sandbox
https://stackblitz.com/~/github.com/acherkashin/react19-useOptimistic
The current behavior
I see every added item 2 times.
The expected behavior
If I add 3 elements, I should see 3 items in the list, not 6.
The text was updated successfully, but these errors were encountered: