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.

[dbritto-dev]

@justrealmilk seems you didn't read the docs but you don't need to update every single hook, it depends on what you want to use

[EricWVGG]

Yeah, this doesn't really make much sense… it’s fine and all to say “read the docs” but this is a thing that worked yesterday and doesn’t work today, I’d like to know what exactly happened.

[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 ?