Trigger: Julian Garamendy's post: React State Management in 2020

He says: I differentiate between application/UI state and remote data cache. and use SWR or React Query to keep a cache of remote data.

Wait? What? I store the data fetched from an API in state! Why should I keep it in cache? How do I do that?

Benefits from having a cache:

i. If something goes wrong while refreshing data from the API the state will become empty, leaving User scratchig their heads wondering where the data went. Bad user experiencie.
ii. Once data has been loaded, it's faster the grab it from the cache.

How to get started with caches?

As he explains in his post, there are two libraries that help you do that: SWR and React-Query.

The first thing I did is go and check how popular these libraries are. Numbers are not huge (in npm standards) but they are fast growing. It didn't stop me from going and spending a good amount of time reading about both of them, their syntax, custom hooks and React Suspense. SWT seems to do other stuff, like pagination, which is very cool. Or maybe React-Query does it too, it's just that I haven't digged enough yet. In any case, I see how useful they can be for my projects and I shall try them soon.

You can my reading list so far below.

Enjoy!

Resources:

1. Why You Should Be Storing Remote Data in a Cache (and Not in State)
2. Using Suspense with react-query
3. Caching clash: useSWR() vs. react-query
4. An Introduction To SWR: React Hooks For Remote Data Fetching
5. SWR Docs
6. React-Query Docs