Cannot update URLSearchParam states with useShallow/shallow

[devappmin]

Hi, I've recently encountered an issue where the state typed as URLSearchParams isn't updating correctly. When I use the set() method to update URLSearchParams, it triggers, but the state, which I manage using useShallow, does not reflect the change in value.

I suspect the issue could be related to shallow.ts. In the following example, for it to function correctly, it should return false, yet it returns true.

const a = new URLSearchParams({'hello': 'world'});
const b = new URLSearchParams({'zustand': 'shallow'});
console.log(shallow(a, b)); // true

Could this behavior be due to a problem in the shallow comparison logic?

[dai-shi]

Well, in general, I think shallow has been supporting basically plain objects. Map/Set are added lately.
That said, I think it would be better if we could support Symbol.iterator in general and remove special handling for Map and Set.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator
I think it's safe to add it in Zustand v5.

Would anyone like to give a try?
(I think we need heuristics to determine if an item is a tuple or not. Array.isArray(x) && x.length === 2? Any better approach?)

[dbritto-dev]

@devappmin @dai-shi in this case should be shallow(a.toString(), b.toString()) I wouldn't compare URLSearchParams instances

[devappmin]

@dbritto-dev @dai-shi That’s right, it does work properly if we convert it to a string for a shallow-check instead of using URLSearchParams itself. However, in that case, every time we use the state, we need to retrieve the string-converted information and recreate the URLSearchParams instance. This can be easily overlooked and is somewhat inconvenient.
Furthermore, I agree with @dai-shi that it would be better to support Symbol.iterator to handle those cases like URLSearchParams, Map, Set. This is because there might be more hidden cases similar to URLSearchParams.

[dai-shi]

Done in #2427