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.

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

[GusakovskayaDev]

If you pull each value individually from the store, you can do without useShallow.:

const addItem = useStore(state => state.addItem);
const loading = useStore(state => state.loading);

But if you need multiple values, then you have to use useShallow for surface memoization.:

const [addItem, loading] = useStore(useShallow(state => [
    state.addItem, state.loading
  ]));