v5 Persist on store creation

[donferi]

In v5 it seems like now we need to manually set the state after store creation

https://zustand.docs.pmnd.rs/migrations/migrating-to-v5#persist-middlware-no-longer-stores-item-at-store-creation

const useCountStore = create(
  persist(
    () => ({
      count: 0,
    }),
    {
      name: 'count',
    },
  ),
)
useCountStore.setState({
  count: Math.floor(Math.random() * 1000),
})

But now I'm a bit confused, if I'm persisting this to async storage, won't the next time the app loads it will set the count again to a random value and overriding the already persisted value?

This is a bit confusing to me.

[dai-shi]

Yeah, async storage might be tricky. Is this already a problem with v4.5.4, or a new thing with v5?

[donferi]

I'm just trying to upgrade to v5 and I'm a bit confused by the upgrade guide. I'm just not sure what is stored and what isn't at store creation when using async storage.

Docs says to add:

useCountStore.setState({
  count: Math.floor(Math.random() * 1000),
})

Docs mention this is only for initial state but since on the same object I may have setters like increment() now I don't know what I need to reset and what not.

I'm also a bit confused with the stable selectors, if I have a state of something like users: User[] and I have a filter of something like:

      getActiveUsers: () => {
        return (
          get().users.filter((user) => user.status === "active")
        );
      },

Is that now unstable if there are no active users? 🤔

[dbritto-dev]

@donferi few things:

• In Zustand, setState()/set() performs a shallow merge by default. However, you can override this by setting replace to true.
• In Zustand, you can use getInitialState() to reset your store
• In Zustand, stable selector results or references mean returning the same instance, allowing you to use Object.is() to verify them.

You can use custom hooks to return stable selector results. So instead of this:

const useActiveUsers = () => {
  return useSomeStore(state => state.users.filter(user => user.active))
}

You could do this:

const useActiveUsers = () => {
  const users = useSomeStore(state => state.users)
  return users.filter(user => user.active)
}