useFetcher({ revalidate })

[ryanflorence]

I'm thinking fetchers should be able to opt in to data revalidation on actions.

At the moment, useLoaderData will be revalidated everywhere after an action (<Form>, <fetcher.Form>, submit(), fetcher.submit()). As a default this makes sense because it's basically emulating normal browser navigation after a POST.

useFetcher in general shouldn't revalidate, that could be really intense on the network tab (I've got a UI with about 50 fetchers on the screen, I don't want all of them revalidating).

But if I'm doing something like using loader data for the initial render, and then using a fetcher later, I'd want that fetcher to also revalidate on actions.

Consider a virtualized list:

function SomeRoute() {
  let fetcher = useFetcher();
  let loaderData = useLoaderData();

  // use fetcher data as it's more dynamic but render
  // the initial items for the server render
  let items = fetcher.data || loaderData;

  return (
    <VirtualList
      items={items}
      renderItem={(item) => <SomeItem item={item} />}
      onPage={(p) => {
        itemsFetcher.load(`/items?p=${p}`);
      }}
    />
  );
}

After an action elsewhere in the UI, initialItems will revalidate with the server but fetcher will not, but this UI won't capture it because it's rendering the fetcher's data.

To deal with this you could synchronize the state of both into a new React.useState and then use an effect to detect a change in loaderData, but that seems a but nutty.

Or, we could let fetchers opt-in to revalidations.

I dunno what I think yet, feels good though?

[hollandThomas]

Or, we could let fetchers opt-in to revalidations.

Like this?

let fetcher = useFetcher({ revalidate: true });
// or `let fetcher = useFetcher(true);` in case you're certain that this will remain the only argument

Maybe allow something like

let loaderData = useLoaderData();
let fetcher = useFetcher({ revalidate: [loaderData] });
// or `let fetcher = useFetcher([loaderData]);`

i.e. allowing revalidate to be either a boolean (if true, always revalidate after an action) or a dependency array (revalidate on detected change in any of the array's elements). The latter would be syntax sugar for your proposed "nutty" solution. I think that the explicit API might be nice since it guides the way for people who want such behavior (with fine-grained control) but don't want to come up with a solution by themselves.

[vanics]

Sorry to revive an old discussion. I found this thread while doing some research and I think this note would be useful for anyone who may come across this.

The solution to the problem above is to use this:
https://remix.run/docs/en/main/route/should-revalidate

[vanics]

This thread can be closed now.