Unable to navigate after fetcher.load()

[GabeMeister]

Reproduction

I ran into a tricky problem with Remix involving fetchers. The original thing I wanted my app to do was be able to "reset" the action data after the user submits a form involving server-side validation. For example, the user could be submitting a form that has an email input in the sidebar of a page, and you want to do a server-side check on whether it's an email that already exists in the DB already, and print "This email is already taken" in the form as an error to the user. The trickiness comes after the user corrects the error and re-submits the form (which I'm using <fetcher.Form>, since I don't navigate the user away from the page after submitting) and I want to get rid of the server-side error message that's displayed. The error message comes from the action data that returned from the fetcher. My current solution to remove the error message is making a call to a resource route called /reset-fetcher in a useEffect() that runs after it detects the action data changing. However, since turning on the v3_fetcherPersist future flag, I noticed that I get an error when trying to navigate to a different page. To repro, go to: https://stackblitz.com/edit/remix-run-remix-zhxymkme?file=app%2Froutes%2Fa%2Froute.tsx and then do the following steps:

1. Navigate to /a
2. Click "Submit", which submits an empty form
3. Click the link "Go to Page B"
4. Notice an error like the following shows up in the dev console: Uncaught (in promise) Error: Expected fetcher: :R35:

What is the solution to this problem?

System Info

System:
    OS: Linux 6.10 Ubuntu 24.04 LTS 24.04 LTS (Noble Numbat)
    CPU: (16) x64 AMD Ryzen 9 5900HX with Radeon Graphics
    Memory: 11.89 GB / 30.76 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 22.15.0 - /usr/local/bin/node
    Yarn: 1.22.22 - ~/.yarn/bin/yarn
    npm: 9.6.3 - /bin/npm
    bun: 1.2.15 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 139.1.81.131
    Chrome: 138.0.7204.157
  npmPackages:
    @remix-run/dev: ^2.15.1 => 2.17.0 
    @remix-run/express: ^2.15.1 => 2.17.0 
    @remix-run/node: ^2.15.1 => 2.17.0 
    @remix-run/react: ^2.15.1 => 2.17.0 
    vite: ^7.0.0 => 7.1.1

Used Package Manager

yarn

Expected Behavior

I am able to navigate to /b without getting any errors.

Actual Behavior

An error occurs, and navigation does not occur. The error message says Uncaught (in promise) Error: Expected fetcher: :R35:

[machour]

You are kind of swimming against the current. The error you're seeing is because v3_fetcherPersist doesn't like your trick to reset the fetcher data.

Fetchers aren’t meant to be “reset” externally. The right flow is to return clean data from the action on success (null or an empty object), and return something like { error: "Email already used" } on failure. Then, conditionally display errors in your UI.

This way, when the user fixes the input and resubmits, fetcher.data.error will clear out, and your error message will disappear naturally.

[GabeMeister]

The problem lies in when I want to change the action data before you re-submit again to the action successfully. Here's two real-life examples:

• I want to remove the "Email already used" error message on key up of the email input, that way the user doesn't have to stare at a big error message while they're re-typing a new email.
• Displaying a "Success!" toast after a successful form submit, without displaying "Success!" over and over again. Here's a link to another stackblitz demonstrating this situation.
• This user's situation

The solutions to all of these problems is possible with the new fetcher.reset() function (which looks like it's going to be available soon via this release of React Router), but my team hasn't had enough bandwidth to upgrade to React Router yet, as we're still on Remix.

Does that make sense?

[CoderDeltaLAN]

Context

• Remix 2.x
• Using fetcher.load() to validate/reset form state
• After load completes, calling navigate(...) doesn’t change route or is flaky

Why
fetcher.load() is asynchronous and drives a transition. If you call navigate in the same tick (or while fetcher.state !== 'idle'), the navigation can be swallowed by the in-flight fetcher transition or immediately reverted by a revalidation.

Fix (minimum viable)
Use an effect that waits for the fetcher to become idle and then navigate based on the response.

import { useEffect } from "react";
import { useFetcher, useNavigate } from "@remix-run/react";

export default function EmailCheck() {
  const navigate = useNavigate();
  const fetcher = useFetcher({ key: "email-check" });

  // trigger the load somewhere (button, submit, etc.)
  // fetcher.load("/validate-email?value=...")

  useEffect(() => {
    if (fetcher.state === "idle" && fetcher.data) {
      if (fetcher.data.ok) {
        navigate("/success", { replace: true });
      } else {
        // reset UI/errors as needed
        // e.g., show fetcher.data.message
      }
    }
  }, [fetcher.state, fetcher.data, navigate]);

  return (
    <fetcher.Form method="get" action="/validate-email">
      {/* ... */}
    </fetcher.Form>
  );
}

Alternative patterns

1. Let the server redirect
   If your loader can decide the destination, return a redirect and avoid client-side navigate:

// routes/validate-email.tsx
import { redirect } from "@remix-run/node";
export async function loader({ request }: LoaderFunctionArgs) {
  const url = new URL(request.url);
  const value = url.searchParams.get("value");
  const ok = await check(value);
  return ok ? redirect("/success") : new Response(JSON.stringify({ ok }), {
    headers: { "Content-Type": "application/json; charset=utf-8" },
  });
}

2. Reset fetcher state explicitly
   If the issue is stale fetcher.data preventing UI updates, remount or reset:

// give the fetcher a stable key and change it to reset
const fetcher = useFetcher({ key: `email-check:${resetId}` });

o vuelve a estado limpio con un setState/useId que fuerce remount del sub-árbol.

3. Avoid race with revalidation
   Si action/loader del layout revalida al finalizar el load, usa replace: true en navigate y/o estructura la ruta para que la revalidación no sobre-escriba el history.

Checklist

• Navega después de fetcher.state === "idle".
• Lee fetcher.data para decidir destino.
• Considera redirigir desde el servidor si la lógica es determinística.
• Evita condiciones que disparen revalidaciones que “desnaveguen” la UI.

Docs

• useFetcher: https://remix.run/docs/en/main/hooks/use-fetcher
• Navigation & redirects: https://remix.run/docs/en/main/utils/redirect
• Data revalidation: https://remix.run/docs/en/main/discussion/revalidation

If this helps, please Mark as answer so others can find it.

[GabeMeister]

Switching out the fetcher key ended up being the correct solution! I updated my first stack blitz: https://stackblitz.com/edit/remix-run-remix-zhxymkme?file=app%2Froutes%2Fa%2Froute.tsx