Infinite loop error with V5

[smo043]

Bug Description

Hello Team,

I upgraded to version 5 and encountered an infinite loop error. I have been using the useShallow hook without issue since version 4, but it is now broken in version 5. Any suggestions would be greatly appreciated.

My V4 code looks like this:

import { useShallow } from 'zustand/react/shallow'

const [searchValue, setSearchValue] = useStore(
  useShallow((state) => [state.searchValue, state.setSearchValue]),
)

Reproduction Link

na

[dbritto-dev]

@smo043 would you mind creating a minimal repro on stackblitz?

[smo043]

It is a little tricky to replicate, but I am using Next.Js 14 works fine with normal routes, but not with parallel routes such as "open a modal through next.js" route, returns the reported error. This issue not observed in V4.

[dbritto-dev]

without a minimal repro I can't help you

[dai-shi]

Maybe, you forgot to use useShallow somewhere else.

[smo043]

Hello @dai-shi @dbritto-dev -

After reviewing the code, I have identified the root cause of the issue.

const [myValue] = useStore(
   useShallow((state) =>      
  [state.myValue.map((name) => name)])
);

The .map function was causing an infinite loop, and the same code works effectively with version 4.

[dbritto-dev]

@smo043 here you go, btw @smo043 expose some errors that were hidden on v4. On v5 stable selector results are important since we use useSyncExternalStore that could trigger an infinite loop if the references are not the same.

const useMyValueNames = () => {
  const myValue = useStore(state => state.myValue);
  return myValue.map(name => name)
}

[dai-shi]

@smo043 Try this:

const myValue = useStore(
   useShallow((state) =>      
  state.myValue.map((name) => name))
);

[smo043]

@dai-shi @dbritto-dev - The new version appears to have fixed the issue. Was there a change regarding this issue? Just curious to know. Thanks

[dbritto-dev]

@smo043 we refactored shallow util, now we even can compare Generators -> #2821

[smo043]

@dbritto-dev - Amazing thank you