Coder Social home page Coder Social logo

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

acherkashin avatar acherkashin commented on May 21, 2024 2
Bug: optimistic state (useOptimistic) shows both optimistic and returned from server data when running several async actions

from react.

Comments (6)

eps1lon avatar eps1lon commented on May 21, 2024

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.webm

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.

JSerZANP avatar JSerZANP commented on May 21, 2024

FYI, This could be reproed in the official demo

optimistic.mov

from react.

acherkashin avatar acherkashin commented on May 21, 2024

@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?

image

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.

eps1lon avatar eps1lon commented on May 21, 2024

Why optimistic update function is called 3 times every time optimistic state is updated?

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.

from react.

acherkashin avatar acherkashin commented on May 21, 2024

@eps1lon thank you for the explanation.

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? 🤔

Could you throw the light on the question above?

from react.

eps1lon avatar eps1lon commented on May 21, 2024

Because we added it to the non-optimistic slice but it's still in the optimistic slice because one action is still pending.

from react.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.