harsh-harlequin

useQueries and memoization

This might be a lack of react knowledge but I will just go ahead and ask it here. I have a custom hook using useQueries to call multiple endpoints in parallel. The result is mapped using the combine property, outputting a data variable which is used in a component. The component is using useState for several reasons, updating that state triggers the hook once again returning another reference to an array containing the same data. Is their a way to prevent this from happening? In my case I am passing that array to a child component (using memo) but as it's another reference, this component keeps re-rerendering.

12 Replies

helpful-purple•14mo ago

https://tanstack.com/query/latest/docs/framework/react/guides/render-optimizations#memoization

TanStack | High Quality Open-Source Software for Web Developers

Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.

harsh-harlequinOP•14mo ago

Can I also use this in the case of useQueries?

harsh-harlequinOP•14mo ago

https://tanstack.com/query/v5/docs/framework/react/reference/useQueries

TanStack | High Quality Open-Source Software for Web Developers

Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.

harsh-harlequinOP•14mo ago

seems like I can also wrap combine in a useCallback

helpful-purple•14mo ago

Correct

harsh-harlequinOP•14mo ago

not sure if I should any dependencies in the useCallback, my eslint is not complaining atm :p

helpful-purple•14mo ago

Not unless you need a variable outside of what's provided from combine

harsh-harlequinOP•14mo ago

Nope, I don't, awesome! Thanks for thinking along, memo now works in the child component as the reference is the same 😉

flat-fuchsia•14mo ago

When does the select function itself changed referentially? When this is happening? is code like this useTodos((data) => data.length) referentially unstable?

helpful-purple•14mo ago

Your example is a little minimal. The inline function is not stable, no, but you're referencing a useTodosCount example which mentions a component using that custom hook won't render unless the length changes

helpful-purple•14mo ago

This explains it better than I ever could: https://tkdodo.eu/blog/react-query-render-optimizations

React Query Render Optimizations

An advanced guide to minimize component re-renderings when using React Query

flat-fuchsia•14mo ago

@troywoy I have this custom hook, and returns bigger object, I'm applying select function as optional prop, so using code like this in some component, can we say the prop select is referentially stable, and React won't re-render, because select is applied to the function? Do I need to extract this inline functions above the component to be referentially stable or not?

    const { workspaceObject } = useGetWorkspaceObject({
        select: workspaceObject => ({ type: workspaceObject.type })
    });

    const { workspaceObject } = useGetWorkspaceObject({
        select: workspaceObject => ({ type: workspaceObject.type })
    });

Gaming

Programming

useQueries and memoization

Did you find this page helpful?