Multiple loads from fetcher

[s12chung]

Built a react app with no client-side requests caching and noticed that the fetchers are doing multiple calls to loaders.

In one instance, I'm using <fetcher.Form method="post">, which calls all the loaders of the page again after the submission of the form. Looking at handleFetcherAction(), it seems intended. I guess it's to ensure the page state is in sync with the mutations of the post/action?

The other instance is similar to the useFetcher docs:

import { useFetcher } from "react-router-dom";

function SomeComponent() {
  const fetcher = useFetcher();

  useEffect(() => {
    if (fetcher.state === "idle" && !fetcher.data) {
      fetcher.load("/some/route");
    }
  }, [fetcher]);

  return <div>{fetcher.data || "Loading..."}</div>;
}

Basically, fetcher.load() is being called multiple times because fetcher.state === "idle" even after .load() has been called, so it ends up being called twice. I'm not sure why this would be intended, other for optimization. Is this intended?

I like the overall design of react router. If the behaviour is staying the same, I feel like this should be in the docs at least.

Edit: Related to the useEffect() call, seems like invokeEffectsInDev() is making the second call (see facebook/react#19523). However, useRef does not work, as the data won't load in my component, while the simple implementation using a window.fetch() works.

[wlemahieu]

React 18 runs side effects twice in development which is probably what you're encountering. You can disable react strictmode to stop this behavior.

[s12chung]

Yeah, the Edit at the bottom of the post hints at that, I guess there's no way to avoid it other than strictmode? In particular, this comment suggests using a ref: facebook/react#19523 (comment), but it doesn't seem to work for the fetcher.load case.

It's really strange that fetcher.state === "idle" even after .load()