Is it better to avoid calling `useQuery` many times? (i.e. inside a component that's in a loop)
I know that tanstack query de-dupes the request, but I would like to know if there are any obvious performance problems that may arise from calling the same query multiple times (i.e. n-sized list), as opposed to "lifting it up" to a parent component and passing the query as a prop/context
2 Replies
passive-yellow•15mo ago
additional query observers (created by useQuery) do have an overhead, but it's usually negligible until you hit multiple thousands of those. I'm not sure what the list example is exactly because if you have a
/todos endpoint that delivers 200 todos - why would you call the /todos query again in the child?
So I guess it's more like a /config endpoint that returns a single entry, and then you have a list with multiple entries that each need that. I guess if the tree is shallow, I would pass it as prop. But "it depends"unwilling-turquoiseOP•15mo ago
Hi there Dominik, big fan!
Sorry, I realize that didn't make much sense. I actually mean to ask about calling
useMutation many times. (i.e. <TodoItem />, where you can mutate the item from inside the component)
But I guess the logic is similar
Thanks a lot for your insight. Taking it into consideration, I decided to pass the the same mutation as a prop to all <TodoItem />s to avoid the overhead when I can