useFetcher hook runs on every url change in a component, causing serious performance issues

[random dragon]

So to explain my situation simply, i have a list of items on a page and a "modal" route that opens when you click it. The Outlet renders the items underneath, all good.

However, inside the item component i use "useFetcher" a few times to to do various things, delete, update, duplicate etc on certain keyboard shortcuts. and when opening the modal i can see in the logs/react profiler that every item in the list underneath is re-rendering and have tracked it down to the useFetcher hooks. Due to the nature of my app i could have many many items rendered, especially after infinite pagination. Why do these have to re-render when the url changes? i know its hooked into the whole remix lifecycle of things but it means any component on the page re-renders when the url changes regardless. Am i missing something?

[vapid sonnet]

When fetcher.submit Remix revalidates all loaders by default. This is because Remix has no way of knowing how data has changed in your db, so better double check. Use fetcher.load if you're not mutating data.

Use should reload on parent loaders if you're certain a post request do not cause data mutate for the parent(s) https://remix.run/docs/en/v1/api/conventions#unstable_shouldreload

[random dragon]

@vapid sonnet It's not the loaders re-rendering thats the problem, as i can memoize the components so they dont rerender if not changing. It's the useFetcher() hooks inside each component that are "re-running" causing the component to re-render, i have many items on a page and they all have to be re-rendered because they all have a useFetcher hook inside them.

[random dragon]

useFetcher hook runs on every url change in a component, causing serious performance issues

[vapid sonnet]

Mmm you might able to do something like this https://github.com/kentcdodds/kentcdodds.com/blob/93e2f9a06e29078d77d0052759a7d777ef553568/app/utils/misc.tsx#L294

[random dragon]

Little bit surprised (dissapointed even??) that this is not seen as an issue with Remix. I'm using the useFetcher hook so that when i do some action it submits a request to an action i dont care if the url has changed. Why does it need to re-run when the url changes on a client side transition? I will post and issue on the github and see if this is something im doing or a potential issue.

seems there is already this: https://github.com/remix-run/remix/issues/3672

[random dragon]

And here's a PR that someones created, not sure if its related though as its for react-router, does remix use it internally, all this remixing-react-router/react-routering-remix stuff is a bit confusing: