Why is useFetcher causing an re-render infinite loop?

[vedantroy]

I have an input. On every change to the input, I want to call an API.

Here's a simplified version of the code:

  // updated by input
  const [urlText, setUrlText] = useState("");

  const fetcher = useFetcher();

  useEffect(() => {
    if (urlText === "" || !fetcher) return;
    fetcher.load(`/api/preview?url=${urlText}`);
  }, [urlText]);

and here's the full version:

  const [urlText, setUrlText] = useState("");
  const url = useMemo(() => getURL(prefixWithHttps(urlText)), [urlText]);
  const debouncedUrl = useDebounce(url, 250);

  const fetcher = useFetcher();

  useEffect(() => {
    if (url === null || !fetcher) return;
    fetcher.load(`/api/preview?url=${encodeURIComponent(url.toString())}`);
  }, [debouncedUrl]);

The problem is: if I put urlText (in the simple example), or debouncedUrl (in the complex example), inside of the dependencies array of the useEffect, my component starts refreshing in an infinite loop. Why might this be happening? I don't mutate urlText inside of the useEffect, so I don't see why there would be a cycle of update => useEffect => change value => useEffect again.

[vedantroy]

I'm silly. The problem was not with useFetcher at all.

The full code was:

  const [urlText, setUrlText] = useState("");
  const url = useMemo(() => getURL(prefixWithHttps(urlText)), [urlText]);
  const [debouncedUrl] = useDebounce(url, 250);

  const fetcher = useFetcher<PreviewResponse>();

  useEffect(() => {
    if (url === null || !fetcher) return;
    fetcher.load(`/api/preview?url=${encodeURIComponent(url.toString())}`);
  }, [debouncedUrl]);

Originally, I had const debouncedUrl = useDebouced(url, 250); -- which was bad because the useDebounce hook returns an array.

However, I also swear my minimal reproduction was broken at one point. I think there was some version of the minimal reproduction that had a fetcher inside of the deps array of the useEffect, and that version was breaking.

I'm still not sure when to put a fetcher inside of a dependencies array. I know the Remix official docs suggest doing so, but I'm not sure why.

[sergiodxa]

It would be great if you could explain what was the issue for the next person experiencing it.

[vedantroy]

@sergiodxa done!

[IHIutch]

I'm also experiencing this issue when including fetcher in the useEffect dependencies. Would love some insight here since the docs are written to include it: https://remix.run/docs/en/v1/api/remix#usefetcher

I don't seem to have issues if I include fetcher.submit specifically, but my eslint doesn't like that. I get stuck with an infinite loop if I remove the dependency array completely, as well.

[kiliman]

Fetchers have internal state that transitions through the request process, so it is normal for your component to re-render multiple times. However, if you have an effect that calls load again, it will get caught in an infinite loop. You should check fetcher.state and/or fetcher.type to ensure you're only calling fetcher load on initial render.

// will cause infinite loop
useEffect(() => {
  fetcher.load('/someroute')
}, [fetcher])

// this will only run once on initial mount
useEffect(() => {
  if (fetcher.state === 'idle' && fetcher.type === 'init') {
    fetcher.load('/someroute')
  }
}, [fetcher])

[estenp]

Hey there! It doesn't seem like fetcher.type exists anymore. What was that about, and what would be the modern conventions for doing this?

I have a few custom hooks that use useFetcher under the hood to abstract some logic associated with hitting specific resource routes.

It seems like they are rerendering a ton, and I assume this is why. The values they return are derived from the fetcher. Is it a bad idea to use fetchers inside of custom hooks for this reason?

https://discord.com/channels/770287896669978684/1373675695817101395/1373675695817101395