T
TanStack•11mo ago
extended-salmon

useQueries({ combine: ... }) vs useMemo

Is there any advantage to using combine in useQueries vs taking all the query results and passing into useMemo to "reduce" results down? Seems like since we lose the nuance of each query in combine, we'd get the ~same effect with a useMemo
6 Replies
extended-salmon
extended-salmonOP•11mo ago
const result = useQueries({
  queries: [query1, query2],
  combine: (results) => ({
    data: results.map((result) => result.data),
    pending: results.some((result) => result.isPending),
  }),
});
const result = useQueries({
  queries: [query1, query2],
  combine: (results) => ({
    data: results.map((result) => result.data),
    pending: results.some((result) => result.isPending),
  }),
});
vs 
const results = useQueries({
  queries: [query1, query2],
});
const result = useMemo(() => ({
  data: results.map((result) => result.data),
  pending: results.some((result) => result.isPending),
}, [results]);
const results = useQueries({
  queries: [query1, query2],
});
const result = useMemo(() => ({
  data: results.map((result) => result.data),
  pending: results.some((result) => result.isPending),
}, [results]);
wise-white
wise-white•11mo ago
results is a new reference in each render so the second one doesn't work
extended-salmon
extended-salmonOP•11mo ago
okay, what about 
const results = useQueries({
  queries: [query1, query2],
});
const result = useMemo(() => ({
  data: [result1.data, result2.data],
  pending: result1.isPending || result2.isPending,
}, [result1, result2]);
const results = useQueries({
  queries: [query1, query2],
});
const result = useMemo(() => ({
  data: [result1.data, result2.data],
  pending: result1.isPending || result2.isPending,
}, [result1, result2]);
wise-white
wise-white•11mo ago
What's result1 and result2? Anyway we made combine to give you an easier way to do this. What problems do you have with combine?
extended-salmon
extended-salmonOP•11mo ago
just wanted to confirm my understanding doesn't feel like it reduces complexity or provide enough value to justify it over useMemo, which is clearer to me + more powerful I am assuming useQuery returns a stable reference?
wise-white
wise-white•11mo ago
No, the top level one is always a new object

Did you find this page helpful?