Multiple re-renders

[cmacdonnacha]

Hey,

I display some data based on a filter but I have noticed that multiple unnecessary re-renders are occuring.

See this example which is pretty close to my own use case: https://codesandbox.io/s/sleepy-worker-84et8?file=/src/Films.js

If you open up the console and then click the "A new hope only" butto you will see the component re-renders 3 times even though the status and data.length is the same so in my eyes the query key is the same too.

I know that calling setFilter will cause the component to re-render as well but I feel like there's still an extra unnecessary re-render occurring. In this example I have commented out useQuery and it re-renders only once after clicking the "A new hope only" button.

Any ideas?

[TkDodo]

I’m on mobile, but it’s most likely due to the isFetching transition. I’ve written about what that is and what to do against it here: https://tkdodo.eu/blog/react-query-render-optimizations

[cmacdonnacha]

Excellent article, I'm going to have a read through your recent front end articles too as I think you are very good at "thinking like a user".

I'm not affected from the limitations you mentioned in the article so I think I'm good to set notifyOnChangeProps: 'tracked' globally. Am I right in saying that by enabling this I won't receive status updates for background refetches (like refetchOnWindowFocus) but I still do receive status updates like loading as long as keepPreviousData is not set to true?

[TkDodo]

Yep, that’s true. Unless you explicitly use the isFetching boolean in your component, you will not be notified about it. And if the background update doesn’t yield anything new, you’ll not be notified at all. Tracked queries (opt in) together with structural sharing (on per default) is the best way to optimize renders :)

[cmacdonnacha]

Excellent, thanks for the confirmation.

So I added notifyOnChangeProps: 'tracked' to this codesanbox and I can see it went from 3 renders down to 2 so that's great. However, am still wondering why it rendered twice in the following scenario since the data was already cached:

1. Go to https://codesandbox.io/s/sleepy-worker-84et8?file=/src/Films.js
2. Open console and clear it.
3. Click the "A new hope only" button <--- re-renders twice which I expect because we have to fetch new data.
4. Clear console again.
5. Click the "All" button

Result: Re-rendered twice which but I don't think I'd expect that since the data has already been previously fetched and is in the cache.

Or perhaps it is expected since it renders once when I call setFilter(filter) after a button click and then again when the data variable returned from useQuery hook changes? Sorry for the back and forth, just trying to make sure what i see it expected 😀

[TkDodo]

If data changes, then yes, the second render is expected. If data doesn’t change then I would only expect one render.

[cmacdonnacha]

Excellent, helpful as always 👍