How fine grained do you use swr?

[pke]

I am currently thinking about to smart up my components by no longer having them being "dumb" but each of them handling its own live server state.

Take my favourite and watchlist icons. Before they were dumb components that rendered a icon depending on handed in props. Now I have converted them to be connected to a swr hook and toggle their server state themselves.

before:

const FavIcon({isFavourite, toggle}) => (
  <Icon type={isFavourite ? "filled-heart" : "outline-heart" onPress={() => toggleFavourite(!isFavourite)}/>
)

after:

const FavIcon({id}) => {
  const { isFavourite, toggle } = useFavourite(id)
  <Icon type={isFavourite ? "filled-heart" : "outline-heart" onPress={toggle}/>
)

The problem with the old approach was that I had to connect the component whenever I wanted to render it.
With the new approach I can just render it everywhere and all those components will stay in sync (since they use the same cache-key in useFavourite.

Is this a recommended approach of using swr?

[sergiodxa]

I call the approach data-aware components, I always use it so my components can move and they will already have the data they need to work, thanks to request deduping of SWR you can even use N times the same key and it will only fetch it once so there is not issue in duplicating that.