prevent unnecessary re-renders

[bug-brain]

Checkout this example. When clicking the button the component re-renders two times. The first render is because the context changed and the second because forceUpdate is called after setting the query data. Would it be possible to conditionally call forceUpdate by comparing the current and last result? Or is there a way to get React to batch these updates (and any other state updates from other useQuery calls)?

Background: In our app some URL query parameters are mapped to backend calls. In some cases we can prefill the query cache when changing the parameter. Each component that uses the hook is then rendered one additional time for each prefilled cache entry producing the same elements each time. It would be nice if this worked out of the box with one re-render.

[TkDodo]

I've converted your example to react-18 and our react-18 compatible preview build, and it seems to render correctly there:

https://codesandbox.io/s/double-render-react-18-dnv07?file=/src/index.js

I think this is loosely the same as this bug:

• Bug: useEffect not triggering on [deps] change #2628 (comment)

where also calling setQueryData and setting some react-state causes inconsistencies.

[bug-brain]

That's good news. Thank you for looking into this!