Correct way to share a memoized calculation derived from multiple useQuerys?

[collinosh]

I can't imagine I'm the first person to ask, so I apologize if it's a duplicate post- but i couldn't find an example that accomplished exactly what I was looking and would really appreciate some feedback to ultimately better understand useQueries.combine, as the documentation left me feeling less than confident.

In short, I'm looking to reduce the number of Providers in my project, which has so far been a breeze by directly consuming queries in abstracted components, however, I've found there are still a number of instances where I'm performing expensive calculations that depend on multiple useQuerys, and I'm not confident enough in my knowledge of memoization (or react-query internals) to be sure that I'm doing this correctly.

My question is: given the following example hook, does the combine function only occur a single time, assuming the props don't change, even if across multiple components/render cycles? If not, how can I memoize the calculated value while ensuring the latest query data, to be shared by various components, without relying on a parent ContextProvider?

const combine = (results: UseQueryResult<TUserSalesQuery, TUserExpenseQuery>) => {
    const expensiveCalculation = (userSales, userExpenses) => { ... }    
    return expensiveCalculation(results[0].data, results[1].data)
}

export const useUserCalculations = (userId: number, date: string) => {
    return useQueries({
        queries: [getUserSalesOptions({ userId, date }), getUserExpenseOptions({ userId, date })],
        combine,
    })
}

Hopefully that makes sense, sorry again if it's a repost but I genuinely appreciate your responses!

Thanks!

[TkDodo]

even if across multiple components/render cycles

render cycles yes, components not. Every component gets their own “observer”, so it runs at least once per component.

If not, how can I memoize the calculated value while ensuring the latest query data, to be shared by various components

by memoizing the combine function by its inputs, outside of React. reselect is a library that does this well, or memoize-one.

[collinosh]

Thanks so much for your reply. I guess I need to just better educate myself on memoization- and I appreciate your suggestions, I'll take a look.

Edit: just to confirm, would a third party library such as memoize-one be your suggested approach to something like this? Or could I leverage react-query differently to better address my issue?

[collinosh]

@TkDodo would love your thoughts on this, followed your posts and very interested in your response :)

[TkDodo]

could I leverage react-query differently to better address my issue?

no. if you want memoization outside of the component, you need another lib.

[collinosh]

thanks. will give it a try.