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

Support the show

Über anti-entzündliche Ernährung, Fette und Zucker mit Ernährungswissenschaftlerin Laura Merten von Satte Sache