TanStackT
TanStack•3y ago•
12 replies
thick-teal

Query context hook changes and triggers rerender of my component

I'm hooking up react-query into a new app. I have the query client/provider configured as explained in the tutorial:

const queryClient = new QueryClient()

export const App = (): JSX.Element => (
  <QueryClientProvider client={queryClient}>
    <Outlet /> // which is from react-router and loads <ViewLogs />
  </QueryClientProvider>
)


Inside of the ViewLogs component I have a query for some mock data. It relies on some treeNode state so I have that configured correctly in the cache and 
enabled
 config option.

const { isLoading, error, data } = useQuery<IExampleData[]>(
  ['viewLogsMainGrid', { id: treeNode?.id }],
  async () => {
    console.log('fetching', treeNode)
    const { data } = await axios.get<IExampleData[]>('/mock/grid/groups.json')
    return data
  },
  {
    enabled: Boolean(treeNode)
  }
)


I noticed that this query sometimes re-fetches the data when I'm using other parts of the app. Not changing window focus etc.

Debugging this, I see that even when the tree node data hasn't changed, the entire ViewLogs component rerenders. I used react-dev-tools to see why it says "because hook 12 changed" and hook 12 is some part of react-query (see pic). That hook is internal to react-query so I'm not sure what could be triggering that.
chrome_pfdMQ7cCmB.png
Was this page helpful?