blog/react-query-render-optimizations

[utterances-bot]

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

[lgenzelis]

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?

[TkDodo]

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

[lgenzelis]

Very cool! Thanks! :) For anyone else wanting to take a quick peek as well, this is where all the magic happens.

[paragdeka]

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?

[TkDodo]

@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.

[paragdeka]

@TkDodo codesandbox example - https://codesandbox.io/s/epic-haslett-45vef?file=/src/App.js

[paragdeka]

@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! 🙌