[Bug]: React Router 6 useLoaderData returning cached data after fresh data is returned by the loader function about react-router

[brophdawg11]

Loader data ia only revalidated after mutations (POST's) - but in these examples you're not performing a POST submission. In the code above, you don't have a method on <fetcher.Form> or fetcher.submit - and the default HTML behavior for form submissions is GET.

So, the fetcher is submitting a GET submission to the index route and executing the loader, and returning the new data on fetcher.data - but it's never causing a revalidation of the route loader data because no submissions were performed to mutate data.

In the codesandbox you did correctly have <fetcher.Form method="post">, but then you have a preventDefault call and a manual fetcher.submit() that was again lacking method so it was defaulting again to a GET.

The fix is to use <fetcher.Form method="post"> for declarative submissions or fetcher.submit(data, { method: 'post' }) for imperative. Once you are correctly posting, you need an action defined on your index route that handles the mutation.

I this is just a searchbox type UI and there's nothing to mutate, then your best bet is to use the route loader data initially and prefer the updated fetcher data once available.

let data = useLoaderData();
let fetcher = useFetcher();
let mostRecentData = fetcher.data || data;

[brophdawg11]

Another simpler option I forgot to mention is that for a searchbox UI you can also just use navigations and skip the fetcher. <Form><input name="query" /></Form> will by default submit as a GET navigation and serialize the form data into the URL search params, and the changed params will trigger your loaders to revalidate. Then you don't even need a fetcher :)

[dbergey]

I am also experiencing this issue

[Nosherwan]

Thanks @brophdawg11 this is new territory for me as it seems like we are trying to simulate the default behaviors for html forms, so by that logic this makes sense.
My thought process was that if loader is being called and data being fetched then the only thing left to do is re-validation.

[Nosherwan]

@brophdawg11 I think that is what I was looking for, but somehow I started looking at useFetcher as it could serve CRUD altogether. I would suggest that RR6 docs need to be a bit more fleshed out for an easier description.