Optimistic UI Implementation Issue: Retrieving Correct Derived Value in Remix App

[AlexGodard]

I'm trying to implement optimistic UI in my app.

Let's say I have this form UI:

Which submits every time you click an option. Here's the code sandbox.

If I click on the "banana" option, the UI will go through those 4 states:

Notice how the 3rd state (the action has finished, so fetcher.formData is gone) shows apple as the optimistic value -- Is there anything I can do to get orange as the derived "optimistic value" instead?

I've added 1 second delays to my loader and action, and it only stays on the 3rd state for a fraction of a second. It's so quick you can't see it, but if you slow down the network and CPU you can see the radio button flash + a red square box (only shown during the 3rd state).

I'd like to do this without a useEffect if possible, but I realize I might not have a choice.

Here's the full code:

import type { LoaderFunction } from "@remix-run/node";
import { ActionFunction, json, redirect } from "@remix-run/node";
import invariant from "tiny-invariant";
import { useFetcher, useLoaderData, useNavigation } from "@remix-run/react";

const fruitById: Record<number, string> = {
  1: "apple",
  2: "banana",
  3: "orange",
}

const idByFruit: Record<string, number> = {
  "apple": 1,
  "banana": 2,
  "orange": 3,
}

export const action: ActionFunction = async ({ request }) => {
  const formData = await request.formData();
  const fruit = formData.get("fruit");
  invariant(typeof fruit === "string", "Fruit is required")
  const id = idByFruit[fruit];
  // Delay by 1 second
  await new Promise((resolve) => setTimeout(resolve, 1000));
  return redirect(`/fruit/${id}`);
}

export const loader: LoaderFunction = async ({ params }) => {
  invariant(typeof params.fruitId === "string", "Fruit ID is required")
  await new Promise((resolve) => setTimeout(resolve, 1000));
  return json({ fruit: fruitById[Number(params.fruitId)] })
}

const toFormData = (fruit: string) => {
  const formData = new FormData();
  formData.append("fruit", fruit);
  return formData;
}

export default function Fruit() {
  const data = useLoaderData()
  const fetcher = useFetcher();
  const navigation = useNavigation();

  const optimisticValue = fetcher.formData ? fetcher.formData.get("fruit") : data.fruit;

  console.log({ optimisticValue, 'navigation.state': navigation.state, 'navigation.location.pathname': navigation.location?.pathname, 'fetcher.state': fetcher.state });

  return (
    <div>
      {Object.values(fruitById).map((fruit) => (
        <div key={fruit}>
          <input
            type="radio"
            id={fruit}
            name="fruit"
            value={fruit}
            checked={fruit === optimisticValue}
            onChange={() => {
              fetcher.submit(toFormData(fruit), { method: "post" })}
            }/>
          <label htmlFor={fruit}>{fruit}</label><br/>
        </div>
      ))}

      Fruit: {optimisticValue}
      {navigation.state === "loading" && fetcher.state === 'idle' && <div style={{ backgroundColor: 'red', height: 50, width: 100 }}>Loading...</div>}
    </div>
  )
}

Would appreciate any help!

[pdjpdj]

I don't know if you've found a solution to your issue already, but I had exactly the same issue.

To fix the issue I've specified the type for useFetcher to use the action rather than the loader:

const fetcher = useFetcher<typeof action>();

This then gives the following console output, and fixes the flashing, (it's editing a text input from 'Name' to 'Name - New')