Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unnecessary rendering on data re-fetching

See original GitHub issue

Describe the bug I was using why-did-you-render in local and noticed a bunch of unnecessary re-renders happening because of something related to react-query that goes beyond my power as a lib consumer.

To Reproduce

Go to https://next-auth-1b8mmpq6w.vercel.app/
Check console.
Switch tab back and forth to regain window focus.
Check console again to see unnecessary re-renders happening.

Expected behavior It should not re-render if data is the same.

Additional context

It’s a Next.js based demo, here’s the codebase.
If you go to https://next-auth-1b8mmpq6w.vercel.app/swr you are going to see the same thing but handled by SWR. There are not re-renders on stale re-fetching that returns the same data.

Issue Analytics

State:
Created 3 years ago
Comments:5

Top GitHub Comments

4reactions

boschnicommented, Aug 31, 2020

Hi @ankursehdev! Yes in both cases the additional renders are because the query is being revalidated on window focus. You can either disable this behaviour with refetchOnWindowFocus or wait for https://github.com/tannerlinsley/react-query/pull/840 to be merged which will allow you to keep the revalidation, but prevent additional renders.

2reactions

ankursehdevcommented, Aug 30, 2020

I am facing a similar issue too, I have few components on a page - Select Dropdown being one. If I click that dropdown the query is trying to fetch the data again. I don’t know why.

Even on this demo, if you click somewhere post request is firing, is it the right behaviors? Check the GIF below.

I wonder, is it because I am losing focus on the tab and regaining it once I click back? I am new to react-query actually.

react-query-thing

Top Results From Across the Web

Unnecessary rendering on data re-fetching · Issue #938

I was using why-did-you-render in local and noticed a bunch of unnecessary re-renders happening because of something related to react-query that ...

5 Ways to Avoid React Component Re-Renderings

How to Avoid Unnecessary Re-rendering in React ... It's common to use the useEffect() Hook for asynchronous data fetching operations in React applications....

React Query Render Optimizations - TkDodo's blog

An advanced guide to minimize component re-renderings when using React Query.

How to prevent re-rendering of components that have not ...

I would like to prevent the re-rendering and only re-render the component that actually changes. I have seen that useCallback is the right...

Optimizing React performance by preventing unnecessary ...

Only re-rendering React components when necessary can make app your faster. This article explains how to reduce re-renders and avoid common ...