Improve state management for remote data fetching (i.e. caching, re-renders, etc.)

[jtrein]

From the off-site, we all noticed the need for better UI handling of fetched data. For example, one thing we are noticing on Muse0 is we need to re-fetch data a lot if something changes. The same is true for any tribute-ui Dapp.

Here are some notes on what is wanted, and also presented options of two great libraries that can help us surge ahead.

Goals

• Cache data throughout the entire app (i.e. page change won't wait to re-fetch data; cache is first used, then behind the scenes a network call will run to refetch and deep compare the returned data).
• More performant rendering (i.e. less reason to re-render components if data has not changed)
• Remove dependency on Redux.
• Use more modern strategy for fetching and caching data - preferably using a library which makes better use of React's recent-ish improvements in Hooks and Context.
• Enable easier abstraction when accessing and fetching data from Subgraph, JSON-RPC, or any other external server request.
• In some cases, use more advanced techniques to cache data offline (i.e. localStorage). There is experimental support in react-query.

Libraries

• react-query by Tanner Linsley
  • Very popular. Steaming past swr in popularity for its flexibility and features
  • May be better to start with this from the outset as it's not going anywhere and keeps getting better?
• swr by Vercel (creators of Next.js)
  • Very popular. Lots of useful features.
  • Perhaps simpler to get started? It may be all we need for tribute-ui Dapp, and future component/hook library.