react-router data router vs useSwr thoughts

We work on apps which use both useSwr and react-router data router 

Both useSwr and react-router DataRouter can both be used to build apps and both provide

• fetching and caching
• updating, optimistic update support
• auto refreshing

But both libraries are quite different to use and in their "sweet spots".

react-router DataRouter 

sweet spots

• app has multiple routes e.g. List, Edit, View, Create etc. multi route SPA
• has straightforward form data for Create, Edit etc. As in a page worth of data (not pages and pages of nested within nested data)
• progressive web support

its opinionated: "classic web"

• submit form data, to actions which handle persistence
• routes have associated loader functions to get data 
• there is a learning curve and also some unlearning to do
• modelled on Remix which expects actions to be hosted on the server and receive form submissions

useSwr

sweet spots

• no routes e.g. one route SPA
• complex, multiform amounts of data, nested forms
• you 💜 hooks and want to use, easy to integrate with your hooks based architecture
• less learning curve, quick to get started
• fetching data
• mutation support has improved with the useSwrMutation() hook in 2.0, its easy to use
• small bundle size

useSwr is not opinionated

• its a low level building block
• less learning curve (because less opinionated)

You can indeed use both together e.g. react-router (but not data router) for app routes and useSwr for fetching/updating.

Interestingly react 19 is introducing actions which look a lot like remix and react-router actions. The new use() hook looks alot like react-routers defer and Await.