New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Bug]: the state is not destroyed in the useFetcher hook with key parametr #11466
Labels
Comments
Source code of demo import { StrictMode, useState } from "react";
import { createRoot } from "react-dom/client";
import {
Link,
Outlet,
useFetcher,
RouterProvider,
createBrowserRouter,
createSearchParams,
generatePath,
} from "react-router-dom";
const AppLayout = () => {
return (
<div>
<div>
<Link to={"/fetcherWithKey"}>FetcherWithKey</Link>
<br />
<Link to={"/fetcherWithoutKey"}>FetcherWithoutKey</Link>
<br />
<Link to={"/other"}>Other</Link>
</div>
<Outlet />
</div>
);
};
const fakeLoader = async ({ request }) => {
const url = new URL(request.url);
const page = Number(url.searchParams.get("page")) || 0;
const data = Array.from({ length: 15 }, (_, i) => i + page * 15).map(
(id) => ({
id,
})
);
await new Promise((res) => setTimeout(res, 500));
return Promise.resolve({
data,
page,
});
};
const FetcherWithKey = () => {
const fetcher = useFetcher({ key: "list1Route" });
const handleFetcher = () => {
const search = createSearchParams({
page: String(fetcher.data ? fetcher.data.page + 1 : 0),
});
const generatedPath = generatePath(`/fetcherWithKey?${search}`);
fetcher.load(generatedPath);
};
return (
<div>
<button onClick={handleFetcher}>Load fetcher</button>
<pre>{JSON.stringify(fetcher, null, " ")}</pre>
</div>
);
};
const FetcherWithoutKey = () => {
const fetcher = useFetcher();
const handleFetcher = () => {
const search = createSearchParams({
page: String(fetcher.data ? fetcher.data.page + 1 : 0),
});
const generatedPath = generatePath(`/fetcherWithoutKey?${search}`);
fetcher.load(generatedPath);
};
return (
<div>
<button onClick={handleFetcher}>Load fetcher</button>
<pre>{JSON.stringify(fetcher, null, " ")}</pre>
</div>
);
};
const Other = () => {
return "OtherRoute";
};
const FetcherWithKeyRoute = {
path: "/fetcherWithKey",
element: <FetcherWithKey />,
loader: fakeLoader,
};
const FetcherWithoutKeyRoute = {
path: "/fetcherWithoutKey",
element: <FetcherWithoutKey />,
loader: fakeLoader,
};
const OtherRoute = {
path: "/other",
element: <Other />,
};
const routes = createBrowserRouter([
{
path: "/",
element: <AppLayout />,
children: [FetcherWithKeyRoute, FetcherWithoutKeyRoute, OtherRoute],
},
]);
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<StrictMode>
<RouterProvider router={routes} />
</StrictMode>
); |
It looks to me that this is by design: Reading here return state.fetchers.get(key) || IDLE_FETCHER and the cleanup happening here // Registration/cleanup
React.useEffect(() => {
router.getFetcher(fetcherKey);
return () => {
// Tell the router we've unmounted - if v7_fetcherPersist is enabled this
// will not delete immediately but instead queue up a delete after the
// fetcher returns to an `idle` state
router.deleteFetcher(fetcherKey);
};
}, [router, fetcherKey]); It only cleans up when the router changes or the key. If you think this is the wrong behaviour maybe you should rather make a feature request. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
What version of React Router are you using?
6.22.3
Steps to Reproduce
Open - demo or demo with source code
Click - "FetcherWithKey"
Click - "Load fetcher" two times
Click - "Other"
Click - "FetcherWithKey"
Expected Behavior
'fetcher' should return initial value like IDLE_FETCHER
Actual Behavior
After you return, the fetcher does not destroy the state. And you will see the previously loaded list from page number 2. At the same time, FetcherWithoutKey cleared the previously loaded list
The text was updated successfully, but these errors were encountered: