Passing context w/o memo to useQuery triggers infinite loop

[jakubriedl]

As mentioned in here passing context object to useQuery triggers infinite request/cancel/request/.. loop.

Passing context like this to triggers infinite request loop

const [{ data }] = useQuery({
  query: someQuery,
  context: {},
})

and changing it to this one fixes that.

const [{ data }] = useQuery({
  query: someQuery,
  context: React.useMemo(() => ({}), []),
})

From the behaviour I assume that somewhere in code the context object is referentialy compared and I would expect either shallow (to match react behaviour) or deep comparison (easier to understand for most devs) of it.

[JoviDeCroock]

This has been discussed recently, this is because we shouldn't really be deciding for you whether or not your context change should trigger a refetch, for instance what if you pass in custom fetchOptions that are a function? We can't really decide that function being equal without you using useCallback so we move this responsibility to the user, which in the long run will cause our users less problems.

Some related:

• Question: Passing headers in context as opts to fetcher #615 (comment)
• using context inside of useQuery falls into an infinite loop #507

We also have a Spectrum that might be better suited for usage questions.

[jakubriedl]

Thanks for quick explanation. It is fair point that you don't want to decide if it should or should not trigger the re-render. Not really because of functions as they are not even shallow or deep equal but but I get you. I still think shallow equal would be better as it is how components work in react and avoids most the problems you are mentioning.

Would be great to at least document current behaviour as I'm not the first one asking and it is bit unexpected.