feat: add structural sharing of data between query results

[boschni]

No description provided.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/tannerlinsley/react-query/dr5amp18u
✅ Preview: https://react-query-git-fork-boschni-feature-structural-sharing.tannerlinsley.vercel.app

[tannerlinsley]

Ooooooooo... This is awesome. What else can you tell me about this?

[boschni]

This will make sure that if some query is returning a list of todos, and at some point a todo in this list changes, the references to the other todos will remain the same. This allows users to easily check if some part of the data has changed or not (which can be used to prevent unnecessary renders or effects from triggering).

Together with a notify option on queries to indicate when some hook should trigger a re-render, it would also be possible to create a hook similar to the useSelector hook from Redux. This could then get some specific data from a query and only re-render when the selector result changes:

const username = useQuerySelector('user', getUser, getUsername)

[tannerlinsley]

Well shoot dang, that sounds like something I've needed for a while but never tried to build yet.

[tannerlinsley]

Do you feel this is ready to merge?

[boschni]

It passes all tests and did some integration testing so this one should be ready to go 👍

PS: do you also have some time to take a look at the other PRs?

[tannerlinsley]

Yeah, ping me on what your priority is and I'll get to it.

[tannerlinsley]

🎉 This PR is included in version 2.6.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[Svish]

Is this feature documented somehow in the documentation?

[tannerlinsley]

https://react-query.tanstack.com/docs/api#usequery

[Svish]

All I find is the following, but like... what does that mean? How do I use it?

[tannerlinsley]

Well, it's not really a feature you "use", but more of an optimization that is just "there" by default. Maybe we could add a section to the docs that talks about what it is to help people know that it's something they normally will want to keep on. Structural sharing just ensures that if serialized responses don't change over time that their identities are deeply persisted, or in other words, its to make your application code better understand that the todos you fetched from your server in the past === the todos you will receive in future fetches as long as they are structurally the same.

[Svish]

Ah, right, yeah. As a developer I would definitely appreciate having a short explanation of this and other features. What it means, a code example where it obviously helps me, and how it "breaks" if I turn it off / why I would potentially want to turn it off.

[kevinob11]

Is there any documentation or example of how someone would implement a useQuerySelector or similar hook? I have a list of tasks in my app and I often want to limit my re-renders to only the tasks that actually updated in the list after injecting updated tasks via a socket. Seems like this would be a good fit for useQuerySelector or similar. I'm thinking this would allow me to pass in a function that defines what data I want from a specific call of a query and if that data hasn't changed the hook wouldn't trigger a re-render, is that correct?