notifyOnChangeProps for useQueries

[Rinaldo]

With useQuery the default notifyOnChangeProps param does a great job of minimizing renders.

// only rerenders when the value of isSuccess changes
const { isSuccess } = useQuery(someQueryOpts)

But this doesn't work as well with useQueries

// rerenders every time combine returns a different json value (regardless of structuralSharing or if the combine function is memoized)
const { isSuccess } = useQueries({
  queries,
  combine: qs => ({
    data: qs.map(q => q.data),
    isSuccess: qs.every(q => q.isSuccess)
  })
})

I'd like to have a generic combine function that has combined versions of all the flags from useQuery but I'm concerned about excessive rendering with flags like isFetching. Is there a way to get the render optimizations from useQuery working with useQueries?

[bae080311]

With useQuery the default notifyOnChangeProps param does a great job of minimizing renders.

// only rerenders when the value of isSuccess changes
const { isSuccess } = useQuery(someQueryOpts)

But this doesn't work as well with useQueries

// rerenders every time combine returns a different json value (regardless of structuralSharing or if the combine function is memoized)
const { isSuccess } = useQueries({
  queries,
  combine: qs => ({
    data: qs.map(q => q.data),
    isSuccess: qs.every(q => q.isSuccess)
  })
})

I'd like to have a generic combine function that has combined versions of all the flags from useQuery but I'm concerned about excessive rendering with flags like isFetching. Is there a way to get the render optimizations from useQuery working with useQueries?

Because combine creates a new object on every render, it causes re-renders.
If you want to avoid unnecessary re-renders, you should either avoid using combine, or wrap its returned values with get {} accessors and memoize them.

[TkDodo]

const { isSuccess } = useQueries({
  queries,
  combine: qs => ({
    data: qs.map(q => q.data),
    isSuccess: qs.every(q => q.isSuccess)
  })
})

this example subscribes to .data and .isSuccess of all queries, so combine will re-run whenever one of those changes. The component itself will only re-render if the result of combine changes.

What you can’t expect is the fact that you only “use” isSuccess to only re-render when isSuccess changes. At least we haven’t implemented that. If you want that, only return isSuccess from combine.

Because combine creates a new object on every render, it causes re-renders.

That’s not right, we use structuralSharing on the result of combine so returning (new) objects and arrays is supported.

[Rinaldo]

What you can’t expect is the fact that you only “use” isSuccess to only re-render when isSuccess changes. At least we haven’t implemented that. If you want that, only return isSuccess from combine.

That's what I was hoping for but I can see how it might be tricky to implement.

we use structuralSharing on the result of combine

Is it possible to configure that? For useQuery you can provide your own function but I don't see that option for useQueries