Racecondition - fetcher goes to idle before data is ready ? (seen by using useFetchers)

[chessydk]

Hi, just asking here if anyone has experienced anything like this, if not I will try to create a downscaled project showing it (any preferred template for that ?)

In my project (some parts from epicweb), useFetchers is used for doing optimistic UI for a theme change, and theme data from the root loader is then fed into a component. The root loader is executed because the theme is posted to the server, thereby invalidating loader data.

The issue I see, it that useFetchers stops returning the fetcher when data are fetched (expected behaviour) and the rendering is now based on data from the loader instead of the optimistic value. All fine, but when the change happens from optimistic rendering to actual data rendering, it shows the old data from the loader for some time, before it shows the correct data from the loader.
So - basically - the loader is done, but data from useLoaderData is not updated (or react has not propagated the change, or ...?)

I have several loaders on a specific route that are all called due to the theme post action. I have a useEffect in a component that uses data from its loader and does a bit of work (that is the difference from Kent's Epicweb project, where I never see this behaviour).

Could there be a racecondition where the fetcher state is updated before useLoaderData gets the new data, if the system is "working hard" ?

[kiliman]

Hi, just asking here if anyone has experienced anything like this, if not I will try to create a downscaled project showing it (any preferred template for that ?)

The simplest way is to just go to https://remix.new which creates a default Remix project on StackBlitz with the latest version.

[chessydk]

Can't seem to reliable reproduce it, buy I am pretty sure there is a render-race-condition when a component both has a property that is fed data from a loader on some route and also by it self, reads optimistic values from the action/loader on that route.

I guess the safest way is that everything is passed via properties to a given component instead.

[Nill-Aarstiderne]

Did you find a solution to this? I'm experiencing the same issue.

I have a TreeView that I expand or collapse by pressing an icon. It works perfectly for a while, but after some time, it occasionally performs an unexpected expand-collapse-expand sequence.