How does ReactQuery monitor complex Query Key changes by Value and/or Reference

user_1194402 0
Viewed 78

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.

react-query react-hooks reactjs javascript
2 Answers

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.

user_84053100

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. ===).

user_56504470
Related