Fetcher sometimes transitions to idle before new loader data is available

[updbqn]

Reproduction

MRE: https://stackblitz.com/edit/github-dbzca6qx?file=app%2Froutes%2Fhome.tsx

I'm attempting to do an optimistic update of a toggle following the pattern in the docs. Something like:

  const status =
    (fetcher.formData && fetcher.formData.get('status') === 'true') ??
    item.status;

Sometimes I get a flicker of stale data during the update e.g.

1. false (initial)
2. true (optimistic)
3. false (fetcher data no longer available, old loader data shown?)
4. true (new loader data comes in)

Try clicking the items in the stackblitz. Here is a short video of the behavior as well.

https://github.com/user-attachments/assets/92a26618-5fde-4faa-915b-8fdb01a5ff7e

When logging fetcher state/formdata/loadeData I see the following transition on "flickering" updates:

i.e. it looks like fetcher.formData is undefined before the new loaderData is available.

The problem seems to go away if I make the loader slower. Though I haven't fully verified that yet.

I couldn't find anything about this in the documentation. Is this expected behavior or am I doing anything wrong?

System Info

-

Used Package Manager

npm

Expected Behavior

New loaderData is always available before fetcher becomes idle.

Actual Behavior

There is a race condition where fetcher.formData is undefined before new loaderData is available.

[SarthakRawat-1]

@brophdawg11 Hello, I think I can work on fixing this. The issue seems to be in handleFetcherAction and getDoneFetcher. getDoneFetcher is clearing data fields when transitioning to idle state but for revalidation, the the formData should be preserved until the revalidation completes.

[brophdawg11]

Thanks! I haven't had a chance to look into it but if you want to push up a PR and tag me I'll take a look 👍