Why when a useFetcher unmounts the route is re-rendered?

[juandiegombr]

Hi everyone,

After some debug work with a non expected behavior using react-router-dom I have arrived to this fact that I am not sure wether is desirable or a bug.

I have prepared this little demo to show you the behavior: DEMO

Project structure:

• In the main.tsx file.
• A Root route using useLoaderData (<Root />)
• A child component using useFetcher (<ComponentWithFetcher/>)
• A toggle functionality that unmounts the child component (<FetcherToggle />)

To reproduce the behavior:

• In the DEMO, click the button Toggle the component with fetcher
• This action unmounts the child component using useFetcher

What happens?

• The Root route is re-rendered every time the child component is unmounted. You can see the counter of renders is incremented.

What do I expected?

• That the Root route is not re-rendered.

Additional questions:

• If this is something intended. Why it happens just when unmounting the component and not when mounting it?

[kiliman]

I have a feeling it has to do with RR maintaining a list of active fetchers (for useFetchers) AND revalidating routes (which causes the root render).

If you add shouldRevalidate: () => false to your root component, you'll see that Remix no longer revalidates and does not re-render.

Whether this is desired, I don't know. I typically don't worry about re-renders like this. You generally want your app to re-render to stay in sync with data.

[juandiegombr]

Thank you for your reply.

I agree with you about the re-renders. I decided to open a discussion because I didn't understand the origin of the Root route re-render.

If the reason is the list of active fetchers. Why a removal of a non-active fetcher triggers this state change?

I have tested the list of fetchers with the react-dev-tools and the RouterProvider changes the reference of the fetchers state from an empty Map to a different reference of an empty Map.

[anhdd-kuro]

@juandiegombr Did you solve this problem ?
My root is include bunch of heavy rendering components and it'S unacceptable in term of performance issues if the root keep re-render like this
In my case , the child useFetcher is inside a modal , just open and close it cause the whole root re-render
I've tested your demo , even if I add shouldRevalidate: () => false , it keep re-render like hell
Maybe I just give up on fetcher and use normal fetch instead ...