Component rerender when query changes from fresh to stale?

[sam-ckchan]

Assume the API data can be fetched, This will cause the three logs, (i.e. component render?)
From my understanding:
1st: when the result status = "isLoading"
2nd: when the result status = "isSuccess"
3rd: after 5s (staleTime option), another log happens even result status = "isSuccess"

export default function App() {
	console.log("App");
	const result = useQuery(queryKey, queryFn, {staleTime: 5 * 1000});
	return <div>App</div>;
}

I'm a code newbie and just learning React, much appreciate for answering this fundamental question🙏

[TkDodo]

useQuery returns a bunch of different options, one being isStale. This will transition from false to true after 5 seconds. However, react-query is highly render optimized. In v4, we had notifyOnChangeProps: 'tracked', which became the default in v4. It means that usually, it will only re-render if a property that you are using in the component changes.

In your example, you aren't using anything of the query - result is ignored. Since you're not using an properties, we're observing all of them, so you'll get that re-render.

In a normal situation, you'd do:

const result = useQuery(queryKey, queryFn, {staleTime: 5 * 1000});
return <div>App {result.data}</div>;

now, you've "used" data, so we can track that and will only re-render when data changes.

[sam-ckchan]

I found out I was using v3 the whole time 😅 (notifyOnChangeProps: 'undefined' by default?)
In v4, that React Query can keep track of the fields automatically (a really cool handly feature!).

Slightly off topic, when "background refetching" completes, assume there's an update from the previously cached data, the UI will seamlessly re-rendered with new data. Have I got that right?

Thank you for the speedy reply I learned so much from your blog🙏

[TkDodo]

I found out I was using v3 the whole time 😅 (notifyOnChangeProps: 'undefined' by default?)

yes

Slightly off topic, when "background refetching" completes, assume there's an update from the previously cached data, the UI will seamlessly re-rendered with new data. Have I got that right?

yes