React Query JSON-compatible values

Question

Iam new to React query and my attention got the following information:

Structural sharing only works with JSON-compatible values, any other value types will always be considered as changed. If you are seeing performance issues because of large responses for example, you can disable this feature with the config.structuralSharing flag. If you are dealing with non-JSON compatible values in your query responses and still want to detect if data has changed or not, you can define a data compare function with config.isDataEqual

React query

I changed my server to return an image like data response

app.get("/response", (req, res) => {
  res.sendFile(path.join(__dirname, "image.jpg"));
});

But still in my app data remain unchanged. So what do they mean by saying JSON-compatible values?

Answer 1

This is an optimization that comes out of the box but it won't work for what you are describing. This is mostly for JSON API responses. React-query instead of creating a new data every time, it will compare the previous data with the new data and modify the values that have changed.

Or in words of one of the mantainers of the library

This feature makes sure that we keep referential identity of our data on every level. As an example, suppose you have the following data structure:

[
  { "id": 1, "name": "Learn React", "status": "active" },
  { "id": 2, "name": "Learn React Query", "status": "todo" }
]

Now suppose we transition our first todo into the done state, and we make a background refetch. We'll get a completely new json from our backend:

[
-  { "id": 1, "name": "Learn React", "status": "active" },
+  { "id": 1, "name": "Learn React", "status": "done" },
  { "id": 2, "name": "Learn React Query", "status": "todo" }
]

Now React Query will attempt to compare the old state and the new and keep as much of the previous state as possible. In our example, the todos array will be new, because we updated a todo. The object with id 1 will also be new, but the object for id 2 will be the same reference as the one in the previous state - React Query will just copy it over to the new result because nothing has changed in it.

This comes in very handy when using selectors for partial subscriptions:

// ? will only re-render if _something_ within todo with id:2 changes
// thanks to structural sharing
const { data } = useTodo(2)

As I've hinted before, for selectors, structural sharing will be done twice: Once on the result returned from the queryFn to determine if anything changed at all, and then once more on the result of the selector function. In some instances, especially when having very large datasets, structural sharing can be a bottleneck. It also only works on json-serializable data. If you don't need this optimization, you can turn it off by setting structuralSharing: false on any query.

Source: https://tkdodo.eu/blog/react-query-render-optimizations#structural-sharing