[34] Query Caching, Why You Must Use It With React; Using React Query

A great way to improve the UX of most React applications is to include a query caching layer. In this episode we talk about why it can be be so important and some techniques to implement it well.

• Owl Creek
• React Query
• SWR (For Next.js)

Show Notes

• Issues
  • Example, data hooks based on another data hook; “location” hook used everywhere
  • Issues with vanilla data fetching hooks
    • Every component/page refetches everything
    • Everything re-renders
    • Delays while waiting for parent hooks to return data
  • Not triggering requests at the correct/ideal time
    • Should be when the user clicks the button to open the new page, not when the new page component is loaded
  • How to structure dependent data flows and refetches?
  • Could also use global state
  • Update endpoints that return new data/object
  • Scroll recovery
  • Paged endpoints
  • refresh intervals
• ️️️Resolution
  • Query caching/fetching logic lib
    • SWR, React Query etc
    • Tell lib what endpoint to hit and under which conditions, assigning that setup a key
      • Lib stores result with a key
      • Everything is done via that key, if the cache has a value for it it will return it
      • Returns the same value every time the hook is used so it doesn’t cause a re-render, smoother app
    • Stale-while Revalidate
      • Loading state
  • key/value store with fetching logic built in
  • downsides
    • some places where it isn’t needed, appropriate
    • Complicated
  • RQ has good dev tools, use them!
  • Triggering requests at the correct/ideal time
  • Generally use endpoint paths as keys
  • scroll recovery
  • paged endpoints
  • dependencies
  • refresh intervals
  • hook for creating RQ endpoints