Best way to periodically get loader data after initial load

[lsdebianchi]

Question

What is the best practice to get some data from the loader (initially) but then also periodically fetching it every x seconds (in nested components)?

Context

In my app I am having some settings which can be manipulated by multiple online users.
To mitigate the user from overwriting each other I would like to fetch new fresh data every 10 seconds.

The data I want is the same data that I have in my loader for the given route, so I am using fetcher.load(CURRENT_ROUTE_PATH).

Problem

I use fetcher.load() in some child components.
Their data comes through props populated by the parent which is the route component which receives the data from loaders and action+loaders.
When this child component uses fetcher.load() the data arrives directly to it and the parent are not re-render by new loader data arriving to them.

This result in the child having a conflict between the data from the fetcher and the data from the props, and no way of knowing which is the most relevant.

My solutions

1. Place the fetcher.load() directly in the parent route component and choose between propagating the fetcher data or the loader data through timestamps (yes the loader data could be more recent as it could come from an action).
2. Post a useless action with fetcher.submit() to re-trigger the loaders.
3. Do not use the loader at all. Just use the fetcher.load() and load the data from a resource route.
4. Do not use the loader at all. Just use the fetcher.submit() and get the data from n action response in the same route.
5. Reload the page every time.
6. Open a web-socket.

I do not feel fully satisfied with any of those solutions.

[pablote]

Found this thread while searching for the same issue. Creating a single coherent data source by putting together both SSR/loader data and client-side queried data seems to be something that every meta-framework struggles with a bit.

I'm currently mostly doing (3). (2) seems like a good idea, I'll definitely try it. I attempted to do something like (1) at some point as it seemed to be the best way to go, although with the details hidden behind a hook, but I ended up discarding it as it got pretty complex handling all the different edge cases.

[Nick-Minutello]

Does https://remix.run/docs/en/main/hooks/use-revalidator not suite your purposes?
Just periodically call revalidator.revalidate(); and let the loaders do their thing.
Eliminates race conditions too theoretically

[moishinetzer]

Does https://remix.run/docs/en/main/hooks/use-revalidator not suite your purposes?

^ This is the correct solution for this problem:

export default function Settings() {
  const { data } = useLoaderData();
  const revalidator = useRevalidator();

  // Revalidate the data every 5 seconds
  useEffect(() => {
    const interval = setInterval(() => {
      revalidator.revalidate();
    }, 5000);

    return () => clearInterval(interval);
  }, []);
}

In the past I have had some weird data revalidation issues where the data causes components to rerender in weird ways so you might want to use an alternative approach or limit how often this happens.

If you are looking for a more granular approach to specifically updating the data only when the data is stale (another user updates the settings) rather than what you have mentioned (long polling) you can check out this example which only revalidates the data when you know it has changed: https://github.com/moishinetzer/remix-live-loader