Closed utterances-bot closed 2 years ago
Excellent article TK! 🙌 I love learning about these little details. Out of sheer curiosity, did you use proxys to implement the 'tracked'
option for notifyOnChangeProps
?
It started out with proxies, but in the end was made with Object.defineProperty
. Have a look at the PR: https://github.com/tannerlinsley/react-query/pull/1578
Very cool! Thanks! :) For anyone else wanting to take a quick peek as well, this is where all the magic happens.
Is there a way to use isFetching and still don't re-fetch on re-render?
Like, when implementing infinite-loading with useInfiniteQuery we need to show a spinner. If notifyOnChangeProps option is used with ['data', 'error'], then unnecessary refetch problem is fixed, but isFetchingNextPage doesn't trigger.
How to show the spinner during fetch but do not refetch the same data again?
@paragdeka react-query will not refetch just because of a re-render, so there must be something else going on. Do you have a codesandbox example?
isFetching
will be true for every fetch, while isFetchingNextPage
is only true when the next page is fetched in an infinite query. So to display a spinner at the bottom of an infinite list, isFetchingNextPage
is likely what you want.
@TkDodo codesandbox example - https://codesandbox.io/s/epic-haslett-45vef?file=/src/App.js
@TkDodo The issue was with react-infinite-scroller. It's working fine now with react-infinite-scroll-component.
Thanks for all the informative posts about React Query! 🙌
React Query Render Optimizations | TkDodo's blog
An advanced guide to minimize component re-renderings when using React Query
https://tkdodo.eu/blog/react-query-render-optimizations