docs(api/remix): fix infinite loop in `useFetcher` example

[bjacobso]

trafficstars

I believe this causes an infinite loop because the fetcher is changing, this should instead be on initial mount

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 5adeb9e654a4573e3dea0b221b9af3224d6686e5

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[remix-cla-bot[bot]]

Hi @bjacobso,

Welcome, and thank you for contributing to Remix!

Before we consider your pull request, we ask that you sign our Contributor License Agreement (CLA). We require this only once.

You may review the CLA and sign it by adding your name to contributors.yml.

Once the CLA is signed, the CLA Signed label will be added to the pull request.

If you have already signed the CLA and received this response in error, or if you have any questions, please contact us at [email protected].

Thanks!

- The Remix team

[remix-cla-bot[bot]]

Thank you for signing the Contributor License Agreement. Let's get this merged! 🥳

[jacob-ebey]

Don't know if this is the right approach, as this will be against the react-hooks/exhaustive-deps ESLint rule facebook/react#14920

This is a valid use of excluding deps and one of the reasons I don't like that lint rule.

[MichaelDeBoey]

@jacob-ebey Shouldn't we include fetcher.load & fetcher.submit into the dependencies array instead? 🤔

[bjacobso]

@MichaelDeBoey I'm still getting the lint error with [fetcher.load].

This seems to work, but looks a little clunky:

  const fetcherLoad = fetcher.load

  useEffect(() => {
    fetcherLoad('/example')
  }, [fetcherLoad])

[jonschlinkert]

Wait, isn't that an abstract example, to demonstrate the methods that can be used useEffect?

In real usage, removing fetcher from the deps array would most likely be incorrect in almost all circumstances. You can fix the infinite loop by checking fetcher.type and fetcher.state inside useEffect.

[machour]

That was indeed an abstract example. Docs have been reworked and they now include several examples avoiding the infinite loop, so I'm going to close this. Thanks again for opening this PR @bjacobso 🙏🏼

[mbrowne]

It seems like most of the examples from the previous version of the docs have been removed in the current docs. @machour were you referring to this as the recommended method?

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

(found at https://remix.run/docs/en/1.19.3/hooks/use-fetcher)