Fetcher sometimes transitions to idle before new loader data is available #14506

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.

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.