I have a strange situation with react-router-dom v6 new "data loader". A simplified case would be the following :
main.tsx
<React.StrictMode>
<RouterProvider router={mainRouter()} />
</React.StrictMode>
mainRouter.tsx
const mainRouter = () =>
createBrowserRouter(
createRoutesFromElements(
<Route path="/" element={<RootLayout />}>
<Route
path="data/:dataId"
element={<DataLayout />}
id="dataLayout"
loader={dataLoader}
errorElement={<DataError />}
/>
</Route>
),
);
In my dataLoader, I have a simple fetch to get the data based on the id in the path param. Everything is working fine, but the fetch is called FOUR times. As this call is unfotunately quite slow, it's a nightmare to wait 4 times longer ...
I know the StrictMode double the call, so I tried to remove it and expected to still have two calls because of some issue with my code, but without the StrictMode, the call is done only once.
Does anybody know why the StrictMode is doing this call 4 times ? It seems I have this issue only for the calls done in loader (or action) element with the new react-router ...
EDIT : as mentionned intially, I know that react strict mode is rendering twice, but it doesn't explain why my loader is called FOUR time while only used in one component.