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

[justrealmilk]

Bug Description

Can someone explain to me why after updating to Next 15 and Zustand 5, I am required to wrap every single one of my Zustand hooks with useShallow? Is this intended? Is this experience by design? I want to scream

Reproduction Link

[dbritto-dev]

Well, actually do you have many options: createWithEqualityFn, useStoreWithEqualityFn, and useShallow you can use whatever you want.

[dai-shi]

Even with Zustand v4, while it doesn't error, it doesn't optimize rerenders. So, v4 hides the potential issue, while v5 reveals it. useShallow fixes both cases.

See: https://stackblitz.com/edit/vitejs-vite-neuatc?file=src%2FApp.tsx&terminal=dev

[EricWVGG]

I’m not using computed state, though.

import { create } from 'zustand'

const useLayout = create<{
  navActive: boolean
  setNavActive: (b?: boolean) => void
}>((set) => ({
  navActive: false,
  setNavActive: (navActive) => set({ navActive }),
}))

export const NavButton = () => {
  const setNavActive = useLayout((state) => state.setNavActive)
  return <div onClick={() => setNavActive(true)}>🍔</div>
}

[dai-shi]

That sounds unexpected. The code looks okay.
Can you create a small reproduction with https://stackblitz.com ?

[justrealmilk]

For anyone interested in the aforementioned docs which I didn't read but could have been simply linked to https://zustand.docs.pmnd.rs/migrations/migrating-to-v5#requiring-stable-selector-outputs

It's way too much work to adjust every single hook. I'd rather look at alternative libraries than go to all that effort so I'll just stay at version 4

Thanks!

[thomasters-nbl]

Such a frustrating change. I am also sticking at V4. What a nightmare. And what was with the unnecessarily unhelpful replies?