useFetcher not memoized

[lauchness]

What version of Remix are you using?

1.14.0

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

Within a component
1 - import and use the useFetcher hook
2 - use the fetcher.submit or fetcher.load within a useEffect
3 - add the fetcher to the useEffect dependency array

Expected Behavior

The effect runs once

Actual Behavior

The effect runs an infinite number of times

Reproduced here: https://codesandbox.io/p/sandbox/usefetcher-not-memoized-thl03p?file=%2Fapp%2Froutes%2Findex.tsx

[pkasarda]

from docs https://remix.run/docs/en/main/hooks/use-fetcher#fetcherload

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

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

  fetcher.data; // the data from the loader
}

[brophdawg11]

@pkasarda's example is correct. fetcher is stateful due to fetcher.state so as soon as you submit, it changes from a fetcher object with state === "idle" to a new object with state === "submitting" and thus your effect fires again. And it submits again, interrupting the prior submission and giving a new fetcher object, and so on. You should mostly be running fetchers in events, not effects. But if you need to run in effects then you'll need to guard the execution with check fetcher.state and fetcher.data as shown above.

#6072 contains a related but slightly different fetcher loop issue that did expose an underlying bug we're in the process of fixing.