useShallow produces error "TypeError: Iterator value X is not an entry object" under very specific conditions

[davefallis]

Bug Description

I am converting a codebase to use useShallow for zustand v5 and ran into the error mentioned in the title. The X in the title depends on the value of the value of the second array item in the selector (see example).

The TypeScript playground link shows projects state with two items. If projects has exactly two items and the selector returns an array of two or more items, an exception is raised from compareMapLike. If projects is an array with <2 or >2 items or you remove the other state from the useShallow, it works as expected.

Error from my projects:

chunk-T2SWDQEL.js?v=46bc7883:9129 Uncaught TypeError: Iterator value 1 is not an entry object
    at new Map (<anonymous>)
    at compareMapLike (zustand_shallow.js?v=46bc7883:11:55)
    at shallow (zustand_shallow.js?v=46bc7883:34:14)
    at zustand_shallow.js?v=46bc7883:66:12
    at zustand.js?v=46bc7883:38:11
    at mountSyncExternalStore (chunk-T2SWDQEL.js?v=46bc7883:11889:38)
    at Object.useSyncExternalStore (chunk-T2SWDQEL.js?v=46bc7883:12573:22)
    at Object.useSyncExternalStore (chunk-QCHXOAYK.js?v=46bc7883:1120:29)
    at useStore (zustand.js?v=46bc7883:36:38)
    at useBoundStore (zustand.js?v=46bc7883:46:39)

I realize the stack trace is minified. The line of compareMapLike that is failing is

zustand/src/vanilla/shallow.ts

Line 8 in 0007ef4

const mapA = iterableA instanceof Map ? iterableA : new Map(iterableA)

Reproduction Link

https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAbzgYygUwIYzXAvnAMyghDgHIAvAVwGcYMA7AEzIChRJZFa0BlACwwAbIRADu+IiXLU6jJgHoagkeLasYATzA5e9bHAC8iVnDhhiAKzTIYNAFxwGVEACM0UANoBdU3Agw-B6Ozm4ecAA+TlQirLisrMgQDHRwPHrQOMaomNgAPHpYaAB8ABSlAJRGxXClCH4WENa2DnCeAIwANHAATN6dfgFBUI7tcRUVCQRUDLbAyXAAgmBglSZmSSnwno3Ndt1DHt5GaTR8MJml6SqiYuU0VYY1njQAdLs2+3Bvh1DeEwBuBJmdAwKhQBi1PxmPLFaFmOC8KjIZBoGg0ACE8LyCjhZkm8VYaAAHpx4Ew0AQMDF4MswEA

[dbritto-dev]

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

[davefallis]

https://stackblitz.com/edit/vitejs-vite-bbl6sy?file=src%2FApp.tsx

[davefallis]

Thanks, I misunderstood the purpose of useShallow. I thought what I was doing was a valid use case for useShallow.

[dbritto-dev]

@davefallis don't worry, I'll add that to the troubleshooting section in the useShallow docs. btw, we talked about that here: https://zustand.docs.pmnd.rs/apis/shallow#troubleshooting

[LavaFields]

I might have seen #1937 (comment) which shows using useShallow to select an array of state properties from the store where one of the selected properties (cache.posts) is itself an array. It has the endorsement of @dai-shi.

[dbritto-dev]

@LavaFields you need to make sure that the result of the selector is stable, with nested arrays or nested objects that doesn't happen. I know there are a few cases where you have primitive values and shallow comparison could work but I don't recommend it.

[dai-shi]

one of the selected properties (cache.posts) is itself an array.

It's fine to have an array, but it will be checked with referential equality, so the array should never be mutated.