Strange conflict with relay query

[leomisha]

I have a strange use case in a component where I have a relay useLazyLoadQuery with options dependant on zustand state.

The component doesn't rerender when I get zustand value using selector function (the same memory link), but it works if I use inline selector.

This doesn't rerender:

const selectValue = state => state.myValue;

const MyComponent = () => {
   const value = useZustandStore(selectValue)

   const data = useLazyLoadQuery(someQuery, { value })
}

But this works fine:

const MyComponent = () => {
   const value = useZustandStore(state => state.myValue)

   const data = useLazyLoadQuery(someQuery, { value })
}

What might be wrong?

[dai-shi]

Interesting. Which version of Zustand is it? How is useZustandStore defined?

[leomisha]

It is 4.5.0 (I also tried with 4.5.2).

The store was created this way:

import { create } from 'zustand';
import { devtools } from 'zustand/middleware';

const initialValue = {
   value: true
}

export const useZustandStore = create(
  devtools(
     set => ({
        ...initialValue,
        actions: {
          setValue: (key, val) => set(() => ({ [key]: value }), false, 'setValue')
        }
     }),
     { name: 'store-id', store: 'store name' }
  )
);

[dai-shi]

I don't see anything wrong from the Zustand perspective.
What if you changed like this?

-   const data = useLazyLoadQuery(someQuery, { value })
+   console.log({ value })

Do you still see any difference between stable selector and inline selector?

[leomisha]

That's the issue. I can use it without relay, or if my relay query doesn't rely on the store data.

[dai-shi]

It seems like a relay issue. With stable selectors, React can probably optimize renders, but using inline selectors is totally valid.