[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...
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
- Query caching/fetching logic lib