setQueryData doesn't change cache reference

[itamardavidyan]

const [cancelOrderRequest] = useMutation(cancelOrder, {
    onSuccess: () => {
        queryCache.setQueryData(queryKey, prev => {
            // DO SOMETHING...
            return {...prev};
        });
    }
});

In the above code the query data cache doesn't change the variable reference (even with {...prev}) what cause useMemo dependencies not to trigger

const dataParsed = useMemo(() => {
    // DO SOME EXPENSIVE CALCULATIONS
    return dataAfterCalculation;
}, [data]);

If I change the dependency to [JSON.stringify(data)] it solve the problem but I think that it can cause to performance problem when the data is huge.

[TkDodo]

Hi,

I think you are experiencing an actual feature of react-query called structural sharing. See: https://react-query.tanstack.com/docs/guides/important-defaults

Query results by default are structurally shared to detect if data has actually changed and if not, the data reference remains unchanged to better help with value stabilization with regards to useMemo and useCallback.

So, this is on purpose to avoid unnecessary re-renders. If nothing really changes (except for the object reference), why re-render? Of course, you can turn that setting off via config.structuralSharing or you can even implement your own config.isDataEqual comparison function (the default would be a deepEqual).

[TkDodo]

Actually, sorry, isDataEqual is undefined per default, not deepEqual, but the structural sharing is on per default, so you will still get a reference to the previousData if nothing changed. See:

https://github.com/tannerlinsley/react-query/blob/25a776d98dfbd629b301abce4dc9b76e5409c881/src/core/query.ts#L200-L208