Bug when returning an object from an action in Next.js

[samuelgomez4]

Bug Description

Hi, I was creating a little e commerce and I have a page where I display some info based on the global state with zustand. I get this info with an action within the store. This action returns an object which is the one I consume in my component as shown below:

If I try to consume this info from the other component I get different errors depending on how I do it. If I do it like this:

I get this error: Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

On the other hand if I try to do it like this:

the error is not shown anymore but then the object gets unresponsive and the info doesn't update as the state changes. This only happens if I return an object. For single values it works just fine.

As you can see I'm generating the store the way zustand recommends in the docs when working with Next.js and provide it with the context api. However if I try to do it the regular way with create, the app work just as expected and all the info behaves responsive.

I see the same behavior with both v4 and v5. Since we use useStore when we integrate zustand with next, maybe it is related with this issue? #2467 (comment)

Reproduction Link

NA

[dbritto-dev]

@samuelgomez4 not a bug but expected behavior, each time you call getSummaryInfo you are returning a different object that could cause some issues due zustand use useSyncExternalStore and require stable selector results in order to cache those results, without that you ended up on an infinite loop, one way to fix that would be using useShallow hook

[samuelgomez4]

Thanks for replying @dbritto-dev . I still wonder why the behaviour differs depending on how we create the store. What you mention is only valid for useStore?

[dbritto-dev]

@samuelgomez4 for all, we are talking about stable selector results

[samuelgomez4]

@dbritto-dev Makes sense, but then the fact that I get an infinite loop when I provide the store with the context vs the normal behavior I get when I do it the regular way might be related to the context API itself and not zustand?

[dbritto-dev]

@samuelgomez4 would you mind sharing us a minimal repro on stackblitz? I wouldn't say that is something related to context api that shouldn't be an issue. We have couple examples of that in our new guides on apis, hooks, and middleware sections

[samuelgomez4]

Hi @dbritto-dev, I was actually able to reproduce the error only in version 5 of zustand. In version 4 works as I was expecting. I thought at some point I had the same error in v4 with the context but couldn't reproduce it again. I was reading the breaking changes of v5 and this one is one of them, sorry I missed that. Thanks!

[dbritto-dev]

@samuelgomez4 v4 hide some errors on v5 those errors are visible