Query with { notifyOnChangedProps: [] } still re-renders on cache update.

[chekrd]

Describe the bug

We need to prevent a query from re-rendering. We are setting query options { enabled: false, notifyOnChangedProps: [] } once the query is fetched. We mutate the same data in another component. Despite the options being set, the query still re-renders.

Your minimal, reproducible example

https://codesandbox.io/s/react-query-forked-8gly22?file=/src/App.tsx

Steps to reproduce

1. Open codesandbox console.
2. Type something into the input and press Mutate todo button.
3. See console output, no log should occur as the component should not re-render.

Expected behavior

Query with options.notifyOnChangedProps set to an empty array does not re-render.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Safari 15.6, Chrome 104

react-query version

v4.1.3

TypeScript version

v4.7.4

Additional context

No response

[TkDodo]

I don't think that's how it works.

1. You render Todo and create an observer with undefined options.
2. Then, you run an effect that sets a ref. But at that point, the observer is already created (observing the data property, and the writing to the ref doesn't trigger a re-render.
   If I console.log(useTodoOptions), I can see that only undefined is logged.
   You can also see in the devtools that at this point, the query does not show up as disabled.
3. Then, when I mutate todo, data is observed and it re-renders. THIS will then actually re-render the component, and it will log the options: {enabled: false, notifyOnChangedProps: Array(0)}.

However, we don't remove props that have once been tracked. This is a deliberate decision because rendering more often is better than missing renders. You can even see in the devtools that for this query and the observer, trackedProps is set to "data".

So all in all, this works as designed and is not a bug.

[chekrd]

@TkDodo
Yes, I know what it does. My point is that when I switch enabled option after the component mount, it is applied. When I set notifyOnChangedProps option, it is ignored. So,

1. How can we unsubscribe without component remount?
2. How can we know which query options are not ignored if changed during rerender? This is unexpected and inconsistent.

[TkDodo]

I'm not sure what the use-case is or what you are trying to achieve. Generally, you cannot unsubscribe as long as the component is mounted. The useQuery hook makes sure that you see on the screen what is in the cache - that is the desired behaviour.

You can try to trigger fetching outside of the component with queryClient.prefetchQuery and then have the component read via queryClient.getQueryData because that doesn't create a subscription, but srsly, why would you want that ?

My point is that when I switch enabled option after the component mount, it is applied. When I set notifyOnChangedProps option, it is ignored

all query options are picked up, but not by changing the value of a ref. Whenever the component re-renders, you're calculating the options and then passing them to useQuery, where they will be stored until you pass in different options. Since the useEffects don't re-render the component, none of the options are picked up until the component renders again.

[chekrd]

but srsly, why would you want that ?

Our use case for this is a page containing a very huge interactive form with autosave feature. When a user enters the page, an entity is fetched and set as an initial value "editedEntity" into the global store. From now on globalStore.editedEntity is "user write only". Conflicts are solved by the user on a granular level. I am looking for a way to prevent this page from resetting the form on useFetchEntity.data update, because initial set to globalStore.editedEntity requires expensive calculations (overwriting user state is another problem). I have a workaround, but I tried to achieve this using useQuery options first.

all query options are picked up, but not by changing the value of a ref. Whenever the component re-renders, you're calculating the options and then passing them to useQuery, where they will be stored until you pass in different options. Since the useEffects don't re-render the component, none of the options are picked up until the component renders again.

In the codesandbox example, all I wanted to do is to simulate the situation that options.notifyOnChangedProps change is not applied - yes, the first mutation must trigger rerender because of useRef, but all other renders should not be triggered as the render after the first mutation applied "disabled" options to the query. You are right the example is not practical.

Now I understand that even if options.notifyOnChangedProps change would be respected by useQuery, it is not the solution for our situation.

[TkDodo]

I see. So you can create a QueryObserver manually - this is basically what useQuery is doing under the hood - and then call unsubscribe() whenever you want. useQuery ties this to the component lifecycle, but you don't necessarily have to.