v6.4 Data Loader Caching Strategy

[bestickley]

With data loaders coming in v6.4, will I still need to handle caching queries with a separate solution like react-query or swr? If so, are those solutions which rely on react hooks compatible with react-router data loaders? I see in the docs for remix it says those libraries aren't needed anymore but I'm not using remix.

[charliematters]

You won't need to strictly, but if you want your loader functions to prepopulate your react query client as well as return the data, then you can transition from react-query to react router gradually.

The 6.4 branch revalidates all the loaders for a URL when you perform an action or use the the useRevalidator hook, at which point anything data returned from the loaders can be considered fresh.

That's the stage of migration I'm at currently, and I haven't checked whether any clever magic like the structural comparison of react-query occurs, which would minimise rerenders

[bestickley]

Thanks for the answer! I'm sticking with react-query for now. Excited to see where this goes though. Before I migrate, I need to see more examples/docs which aren't here yet.

[cliffordfajardo]

@bestickley - TKdodo one of the react-query core maintainers, published this work in progress example code using React Router 6.4+ with action & loaders with react-query

• Feature/rr example TanStack/query#4058
• https://twitter.com/TkDodo/status/1560971584642420736

[bestickley]

@cliffordfajardo, what's the benefit of using new react-router loaders/actions if you're already using react-query?

[grumd]

I disagree that transitioning from react-query to react-router loaders is a good idea. Using something like loader or onEnter on the Route for prefetching data is a good idea (even though for fastest fetches you should do that on hovering the links). But react-query offers so much that react-router lacks, like offline-online tracking, retrying failed requests, refetching on focus and on mount, invalidating the data after a set time period. Switching to react-router's barebones server state solution is imo a big downgrade from react-query. Especially considering how it moves away from declarative approach of "I'm using this data in this component, period".

And even if you keep using react-query with react-router together, apparently from 6.3 to 6.4 react-router and react-router-dom got something like +150% on the bundle size. Not good.

I'd prefer if loader- and actions-compatible routes had a separate component, e.g. LoaderRoute or something. But as it stands now, tree-shaking away the data-fetching code isn't possible if you're already using a different server state solution.