Tracked notifyOnChangeProps on separate components

[talberkoMelio]

I use the same query across different components.
One component uses some props from the query (data, isLoading etc), and another one only triggers a fetch for prefetching without using it.

By using the "tracked" notifyOnChangeProps, will the component which only prefetches the query be rerendered when the data is changed?

Because when debugging it I do see it still rerenders.

Would appreciate your feedback

[TkDodo]

How is the prefetch triggered?

[talberkoMelio]

@TkDodo not sure I get it.
Shouldn't it be:
"None of them, unless you explicitly access them?"

If I understand your answer, I should always access the relevant members like this to use the "tracked" option like this:
const { isLoading, data } = useQuery()

Otherwise, when using the following ways it will create subscription for all members:
const query = useQuery() OR
useQuery()

Am I right?

[talberkoMelio]

@TkDodo also from your blog it looks that when accessing this way it will not track, which I understand it as "None of them, unless you explicitly access them" and not "All of them, unless you explicitly access them.".

I played with a sandbox and seems like using it this does track all props, so I am confused.

May you please elaborate?

[TkDodo]

Shouldn't it be:
"None of them, unless you explicitly access them?"

no. if you don’t access any properties, we will track all properties:

const query = useQuery(...)

console.log(query)

return null

this will re-render on every property change, as “never re-rendering anything” is almost never what you want.

I should always access the relevant members like this to use the "tracked" option like this:
const { isLoading, data } = useQuery()

You can do that, or you can do:

const query = useQuery()

return <div>{query.data}, {query.isLoading}</div>

destructuring or “normal” access with query.something is equivalent.

also from your blog it looks that when accessing this way it will not track,

wrong; queryInfo.data is accessed during render, so data will be tracked.

I played with a sandbox and seems like using it this does track all props, so I am confused.

then there’s something else wrong in your sandbox 🤷‍♂️.

[talberkoMelio]

@TkDodo got it now. In your first example, even when there will be no console log of the query the component will rerender when every prop will change, correct?

const query = useQuery(...)

// there will be rerender here when any of the query props changes

return null

Is there a way to change it so if not using its props it wont rerender?
If a query is disabled, will it still have subscriptions for its members?

In our (huge) codebase there is a wrapper of the query which contains CRUD queries and mutations together, so basically when you use the wrapper you will get the query, createMutation, deleteMutation, updateMutation, which means a subscription for all when you probably just need the query.
Any suggestion here?

[TkDodo]

In your first example, even when there will be no console log of the query the component will rerender when every prop will change, correct?

yes

Is there a way to change it so if not using its props it wont rerender?

pass notifyOnChangeProps: [] to opt out of all re-renders.

If a query is disabled, will it still have subscriptions for its members?

yes. disabled just means “this observer won’t fetch data on its own”.

Any suggestion here?

Don’t do that 😅 . Creating query subscriptions via observers when you only need a mutation is a bad idea. I don’t recall ever recommending such ”monster hooks”.