TanStack•2y ago•

4 replies

hurt-tomato

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>

Then

HELLO

HELLO

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

useEffect

useEffect

when used as a dependency, my intuition is that

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

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

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!

TanStack•2y ago•

4 replies

hurt-tomato

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>

Then

HELLO

HELLO

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

useEffect

useEffect

when used as a dependency, my intuition is that

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

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

HELLO

HELLO

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

data

data

useQuery data on refetch

Similar Threads

useQuery data on refetch

Similar Threads

Similar Threads

Similar Threads