useFetcher causing an infinite loop in useEffect with fetcher in dependency array

[Merott]

I think this is related to #3393 but I'm opening a new discussion since that one's already marked as answered.

I have a calendar view like below, and as the user navigates between months, I need to load some information from the backend. I've decided to use fetcher.load because I don't want any URL navigation as the user interacts with the calendar.

Here's a simplified copy of the code for fetching the data:

const fetcher = useFetcher()
const [activeMonth, setActiveMonth] = useState(() => dayjs().startOf('month'))
const monthParam = activeMonth.format('YYYY-MM')

useEffect(() => {
  // if (fetcher.type === "init") // can't do this because then it'll only work on initial load
  fetcher.load(`/?month=${monthParam}`)
}, [fetcher, monthParam])

The problem is that I'm getting an infinite loop. As commented in the code, checking fetcher.type === 'init' isn't going to work because then the data will only load once. I need to fetch new data when monthParam is changed.

It looks like there's a new instance of fetcher in every render, causing useEffect to run again. Indeed, removing fetcher from the dependency array of useEffect makes the problem go away, but I don't like that solution (eslint feels even more strongly.)

Another option would be to create a ref object for monthParam, compare it to its previous value, and only call fetcher.load() if the param has changed.

const monthParamRef = useRef(monthParam)

useEffect(() => {
  if (monthParam !== monthParamRef.current) {
    monthParamRef.current = monthParam
    fetcher.load(`/?month=${monthParam}`)
  }
}, [fetcher, monthParam])

That's also not really a solution. It's an ugly workaround that only gets uglier when there are more dependencies.

Am I doing something wrong or misunderstanding some Remix paradigm? 🤔

---

See below for a full, albeit contrived demo of the issue (also on gitpod):

SHOW DEMO CODE

import type { LoaderFunction } from "@remix-run/node";
import { json } from "@remix-run/node";
import { useFetcher } from "@remix-run/react";
import { useEffect, useState } from "react";

export const loader: LoaderFunction = ({ request }) => {
  const { searchParams } = new URL(request.url);
  const month = searchParams.get("month");
  const year = searchParams.get("year");

  // TODO: fetch some data from the DB

  return json({month, year});
};

export default function Calendar() {
  const fetcher = useFetcher();

  const [year, setYear] = useState(2000);
  const [month, setMonth] = useState(1);

  useEffect(() => {
    // -----------------> this'll get called infinitely <-----------------
    // debugger;
    // fetcher.load(`/?month=${month}&year=${year}`)
  }, [fetcher, month, year])

  return (
    <div>
      <label>
        Month:{" "}
        <input
          className="border border-gray-900"
          type="number"
          min={1}
          max={12}
          value={month}
          onChange={(e) => setMonth(Number(e.target.value))}
        />
      </label>

      <label>
        Year:{" "}
        <input
          className="border border-gray-900"
          type="number"
          min={1900}
          max={2022}
          value={year}
          onChange={(e) => setYear(Number(e.target.value))}
        />
      </label>
    </div>
  );
}

[kiliman]

I don't think that's the best way to use fetchers. useEffect is fine for initial load, but remember that fetchers go through multiple state changes, and once it's done. You can't reset the state, but you can call load/submit again.

• change month/year
• trigger effect
• fetcher loads
• fetcher state changes
• trigger effect
• fetcher loads
• infinite loop

Even if you try to check fetcher.state or fetcher.type, there's no easy way to trigger a load, because you want to wait until fetcher.type === 'done', but since you can't reset the state, and you can't tell if month/year was the change

Fetchers are best when called via event handlers. I've created a simple codesandbox to demonstrate.

If it were me, I would simply include the month/year as searchParams directly in the URL. This way the actual data can be returned by the loader and directly rendered. Let Remix manage that state for you. It also lets you bookmark/send the URL so you can link directly to the month/year.

Anyway, hope this helps.

https://codesandbox.io/s/remix-fetcher-loop-fix-8w32xw?file=/app/routes/index.tsx

[kiliman]

I think the more you work with Remix, the less you'll rely on useEffect to manage data fetching.

[Merott]

So, I've run into an issue with the event handler approach… It's not impossible to deal with, but I can't think of any ideal solutions.

If we depend on some local state to interact with the fetcher in an event handler, we have to make sure the state changes are applied first, and we can't use any derived state. Any derived state has to be derived inside of the handler, making it harder to reuse the code elsewhere.

This is one area where useEffect shines. You can control the application flow and fire off side effects by setting the state.

Here's what the solution would look like without useEffect:

export default function Calendar() {
  const fetcher = useFetcher()
  const data = fetcher.data

  // getting the date on the client side to keep it in the user's timezone
  const now = new Date()
  const [period, setPeriod] = useState({
    year: now.getFullYear(),
    month: now.getMonth() + 1,
  })

  const { month, year } = period
  console.log({ period })

  // since we're calling an index route, make sure to add ?index to searchParams
  const fetchPath = `/?index&month=${month}&year=${year}`

  useEffect(() => {
    if (fetcher.type === 'init') {
      fetcher.load(fetchPath)
    }
  }, [fetcher, fetchPath])

  const handleFetch = (month: number, year: number) => {
    setPeriod({ month, year })

    /* 🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨
    the next line won't work because fetchPath is derived state, but the state
    hasn't updated yet. We can't use derived state in an event handler. */
    // fetcher.load(fetchPath)

    // We have to derive 'fetchPath' right here:
    fetcher.load(`/?index&month=${month}&year=${year}`)
  }

  console.log(fetcher.state, fetcher.type, month, year)

  return (
    <div></div>
  )
}

In the above example, all the pieces of information required for deriving fetchPath are present inside of the event handler, but I can imagine that might not be the case in a more complex setup.

With useEffect we don't need an event handler, the code is much more declarative, and it won't matter how many pieces of derived state we depend on.

export default function Calendar() {
  const fetcher = useFetcher()
  const data = fetcher.data

  // getting the date on the client side to keep it in the user's timezone
  const now = new Date()
  const [period, setPeriod] = useState({
    year: now.getFullYear(),
    month: now.getMonth() + 1,
  })

  const { month, year } = period
  console.log({ period })

  // since we're calling an index route, make sure to add ?index to searchParams
  const fetchPath = `/?index&month=${month}&year=${year}`

  useEffect(() => {
    fetcher.load(fetchPath)
  }, [fetchPath])
  // 🚨🚨🚨🚨🚨🚨 not including fetcher because it causes infinite reloads

  console.log(fetcher.state, fetcher.type, month, year)

  return (
    <div></div>
  )
}

Here's the full CodeSandbox: https://codesandbox.io/s/remix-fetcher-zjcjox?file=/app/routes/index.tsx

---

Does Remix discourage using useEffect? I still don't understand why fetcher isn't made safe to use with React hooks. A new instance is returned after calling .load(), and that's the only thing breaking the above useEffect approach.

[alex-ketch]

Was facing a similar issue as you @Merott, destructuring the fetcher object to separate it from load function seems to have solved the issue for me.
This way updates to the fetcher state/data don't cause the effect to re-execute.

Mind you, I just did it 5 mins ago so haven't had a chance to see if it caused any unintended side-effects, but the infinite load is gone.

  const { load, ...fetcher } = useFetcher<{ data: GetRegionsQuery }>();

  const [countryCode, setCountryCode] = useState<string>(country ?? "CA");

  useEffect(() => {
    load(`/api/geo/regions?country-code=${countryCode}`);
  }, [countryCode, load]);

[Merott]

Thanks, @alex-ketch...

I also found my own workaround/hack, which is working… for now! 😅

[juniorforlife]

I'm facing the same issue. I have a scroll event listener that updates the index of the in-view div. Whenever that index state changes, I need to call an action to update that index to the server using fetcher.submit. Putting fetcher.submit inside onScroll causes an infinite re-render so I have to rely on useEffect and remove fetcher as dependency array to prevent infinite rerender. I would be great if useFetcher returns the same object every render like useQuery

[Merott]

I don't love this, and I know one day it's going to bite me, but until someone offers a better solution, I'm hacking useFetcher:

import { useFetcher } from '@remix-run/react'
import { useMemo } from 'react'

export function useHackedFetcher<T>() {
  const originalFetcher = useFetcher<T>()
  const fakeMemoizedFetcher = useMemo(() => ({} as typeof originalFetcher), [])

  return Object.assign(fakeMemoizedFetcher, originalFetcher)
}