How to prevent fetching data by using isDataEqual?

[irhamputra]

Hi @tannerlinsley and all maintainers!

After I read the docs I found isDataEqual option to handle oldData and newData but I'm still confused how does isDataEqual work?

Maybe I miss some information about it. I assume about isDataEqual that the stale data will be returned if oldData === newData. or maybe I was wrong?

My workaround
I simulate, I'm out of browser and come back to the browser and what I get is re-render, even tho I'm using isDataEqual.

I thought by using isDataEqual will avoid spurious re-renders. or maybe I was also wrong doing my workaround and should I use refetchOnWindowFocus ?

[TkDodo]

you usually don't need to care about isDataEqual. react-query does a sophisticated check already to see if the data returned from the server is actually different than the data you already have.

what you are seeing is most likely 2 re-renders because useQuery transitions your query to isFetching: true and then back to isFetching: false. You can verify this by logging the result of useQuery.

This flag is exposed so that you can show a background loading spinner if you want. For render optimisations, you can use notifyOnChangeProps and notifyOnChangePropsExclusion.

if you are only interested in e.g. data and error, you can do:

notifyOnChangeProps: ['data', 'error'] - then you will only get re-renders if one of these two changes.

if you want to exclude isFetching, you can do:

notifyOnChangePropsExclusion: ['isFetching'] - but maybe there are other indicators that are changing, e.g. the dataUpdatedAt timestamp will also likely be different.

should this PR land, we'll also have automatic tracking to only re-render if a prop you are actually using has changed.

Generally, I wouldn't worry about "unnecessary re-renders". As long as they are fast, it really doesn't matter. If your form takes too long to render, try not to minimize the re-renders (that's an uphill battle imo) - try to make the render fast again :)
/edit: I can recommend this article on the topic: https://kentcdodds.com/blog/fix-the-slow-render-before-you-fix-the-re-render