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 CreekReact QuerySWR (For Next.js)Show NotesIssuesExample, data hooks based on another data hook; “location” hook used everywhereIssues with vanilla data fetching hooksEvery component/page refetches everythingEverything re-rendersDelays while waiting for parent hooks to return dataNot triggering requests at the correct/ideal timeShould be when the user clicks the button to open the new page, not when the new page component is loadedHow to structure dependent data flows and refetches?Could also use global stateUpdate endpoints that return new data/objectScroll recoveryPaged endpointsrefresh intervals️️️ResolutionQuery caching/fetching logic libSWR, React Query etcTell lib what endpoint to hit and under which conditions, assigning that setup a keyLib stores result with a keyEverything is done via that key, if the cache has a value for it it will return itReturns the same value every time the hook is used so it doesn’t cause a re-render, smoother appStale-while RevalidateLoading statekey/value store with fetching logic built indownsidessome places where it isn’t needed, appropriateComplicatedRQ has good dev tools, use them!Triggering requests at the correct/ideal timeGenerally use endpoint paths as keysscroll recoverypaged endpointsdependenciesrefresh intervalshook for creating RQ endpointsSupport the show

Ver todos los episodios