The result of getSnapshot should be cached to avoid an infinite loop

[jcuenod]

I'm new to zustand. I've got my basic functionality working, but I'm seeing this warning coming from react-dom in the console:

Warning: The result of getSnapshot should be cached to avoid an infinite loop

The stack trace is not very helpful, but I'm not directly using getSnapshot anywhere, so I assume this is a zustand bug. I guess that it has been introduced by facebook/react#24508.

Is this a zustand bug or should I be scrutinizing my own code more?

[dai-shi]

Are you creating a fresh store in render function?

[jcuenod]

I have a store.ts file with:

export const useMyStore = create<MyState>((set) => ({

In a component file I import useMyStore and use it inside the render function:

const MyReactComponent = (props) => {
  const store = useMyStore((state) => ...

Is that not the correct pattern?

[dai-shi]

It looks good. Can you reproduce your issue with https://codesandbox.io/s/react-new ?

[jcuenod]

Thank you, I figured it out. The problem was that I was using useX callbacks to get around some eslint errors about the use of useX hooks outside react components. The actual solution was:

const myState = useMyStore.getState()

[shub1233]

my suggestion would be to use "useShallow" Docs

const [blah] = useMyStore(useShallow((state) => [state.blah]));