In ReactQuery, the useQuery(..) hook takes a key that can contain complex dependencies (in an array). Or even just an int, like todoId that can change (cf the documentation).

Or a filters object like below:

function Component() {
  const [filters, setFilters] = React.useState()    
  const { data } = useQuery(['todos', filters], () => fetchTodos(filters))

  // ✅ set local state and let it "drive" the query
  return <Filters onApply={setFilters} />
}

I'm unable to find an explanation regarding how it does monitor changes under the hood.

If the hashing of the key is well explained in the source code and this blog post the event-handling/monitoring of the value changing is a mystery to me.

So the question is: how does it keep track of changes, even inside complex typed passed in the Query Key array? Is there some introspection happening connecting events to value and/or reference changes?

PS: It is a question also applicable to dependencies in the useEffect(..) hook. There is a general perplexity from me, coming from non-interpreted languages.

In ReactQuery, the useQuery(..) hook takes a key that can contain complex dependencies (in an array). Or even just an int, like todoId that can change (cf the documentation).

Or a filters object like below:

function Component() {
  const [filters, setFilters] = React.useState()    
  const { data } = useQuery(['todos', filters], () => fetchTodos(filters))

  // ✅ set local state and let it "drive" the query
  return <Filters onApply={setFilters} />
}

I'm unable to find an explanation regarding how it does monitor changes under the hood.

If the hashing of the key is well explained in the source code and this blog post the event-handling/monitoring of the value changing is a mystery to me.

So the question is: how does it keep track of changes, even inside complex typed passed in the Query Key array? Is there some introspection happening connecting events to value and/or reference changes?

PS: It is a question also applicable to dependencies in the useEffect(..) hook. There is a general perplexity from me, coming from non-interpreted languages.

• javascript
• reactjs
• react-hooks
• react-query

• Query restarts when key hash changes. Not quite clear what do you mean under event-handling? useEffect hook compares deps just by reference (if you can say so, technically it probably uses tc39.es/ecma262/#sec-isstrictlyequal). – Danila Commented Aug 9, 2022 at 19:03
• My question is about: how does the system know to recompute and compare the Hashkey? How does it "respond" to a change? – Askolein Commented Aug 9, 2022 at 20:05
• 1 It recomputes hash on every render basically, no magic here. – Danila Commented Aug 9, 2022 at 20:49

2 Answers 2

The query keys are hashed deterministically. Basically, we JSON.stringify() the key, but sort the keys of objects inside it so that they are stable. After that, we have just strings (you can also see them in the devtools), and strings are easy to compare to see if something changed (just ===).

how does the system know to recompute and compare the Hashkey?

We just do this on every render.

Ok, since my comment was stolen as an answer even without a mention, I just repost it as an answer myself:

Query restarts when key hash changes.

how does the system know to recompute and compare the Hashkey? How does it "respond" to a change?

It recomputes hash on every render basically, no magic here.

Hash algoritm is an implementation detail, but by default it uses JSON.stringify (the only detail is that the object keys are sorted).

In the opposite, useEffect hook compares deps just by reference (if you can say so, technically it probably uses tc39.es/ecma262/#sec-isstrictlyequal e.g. ===).