Urql: React 16.13.0 'Warning: Cannot update a component from inside the function body of a different component.'

[hugo]

After upgrading to React 16.3, I notice a significant performance issue on pages where I have multiple components all querying the same cache value. This appears to be due to an issue with the useQuery hook and/or the cacheExchange.

Expected behaviour
A single network requests is made to populate the cache. Components render with cached value once available.

Actual behaviour
Performance absolutely tanks and the following message appears: Warning: Cannot update a component from inside the function body of a different component.

---

This doesn't seem to be unique to urql — Apollo has a similar issue. I've forked and tweaked the Apollo example repo to use urql instead of apollo. The same notes about when the issue manifests seem to apply.

[JoviDeCroock]

Hey,

Thanks for the accurate reproduction, this issue seems to be present in most state-management solutions judging from this https://github.com/facebook/react/issues/18178#issuecomment-594150971 I'll follow this up more in the coming days.

[kitten]

If I'm not mistaken, this can very easily be triggered. As far as urql is concerned, results and operations are global. They're then filtered back down. So when you're writing useQuery that triggers an operation, which then comes back with a result. When you duplicate this query then a result from one query will also update the other one. The only way for us to prevent this would be to deduplicate changes when the update is deeply equal to the last state, which seems counter productive 😢

[hugo]

Yeah, I find the warning very counterintuitive in this particular situation. If I have two components calling useQuery with the exact same query and variables, I want them to be "linked" together in this way. It's especially baffling to me, a mere mortal, that if I set all my queries to network-only then everything is fine but if I try to use the cache I get literally thousands of these warnings printed in the console, in my particular app.

[JoviDeCroock]

The error message itself feels kinda erroneous as well to me, let's state the following example

const MyUsers = () => {
  const [result] = useQuery(...)
  ....
}

This errors out if the result is served synchronously from cache but the error states:

Warning: Cannot update a component from inside the function body of a different component.

We aren't leaving the MyUsers component at all, it had me very confused in the start.

[hugo]

Thanks for the quick fix here, folks 🙏