useQuery data on refetch

Hello, does

useQuery

useQuery

do a deep comparison (or something similar) before updating/reassigning the

data

data

attribute?

for example if I do:

const query = useQuery({
  queryKey: ['someData'],
  queryFn: () => fetchSomeData()
})

React.useEffect(() => {
  console.log("HELLO")
}, [query.data])

return <button onClick={() => query.refetch()}>Click Me</button>

const query = useQuery({
  queryKey: ['someData'],
  queryFn: () => fetchSomeData()
})

React.useEffect(() => {
  console.log("HELLO")
}, [query.data])

return <button onClick={() => query.refetch()}>Click Me</button>

const query = useQuery({
  queryKey: ['someData'],
  queryFn: () => fetchSomeData()
})

React.useEffect(() => {
  console.log("HELLO")
}, [query.data])

return <button onClick={() => query.refetch()}>Click Me</button>

const query = useQuery({
  queryKey: ['someData'],
  queryFn: () => fetchSomeData()
})

React.useEffect(() => {
  console.log("HELLO")
}, [query.data])

return <button onClick={() => query.refetch()}>Click Me</button>

Then

HELLO

HELLO

HELLO

HELLO only prints if the data changes. Given object reference changes trigger

useEffect

useEffect

useEffect

useEffect when used as a dependency, my intuition is that

HELLO

HELLO

HELLO

HELLO would print every time I click the button, the

queryFn

queryFn

reassigning

data

data

on success, but this is not the case. If I were to change the data returned by

fetchSomeData

fetchSomeData

fetchSomeData

fetchSomeData (say, I make a change in the db), then

HELLO

HELLO

HELLO

HELLO is printed, giving me the impression that react query only reassigns

data

data

/the object reference after a deep comparison or something like that.

Can anyone explain why this is the case?
Is the underlying implementation of why this happens explained in the docs? If so can I get a link?

Thanks!

useQuery data on refetch

Similar Threads

Similar Threads

Similar Threads