[Feedback Request] Does Zustand v5-rc work for you?

[dai-shi]

How to Install

npm i zustand@next

Migration Guide

https://github.com/pmndrs/zustand/blob/main/docs/migrations/migrating-to-v5.md

How to respond

Add comments to this issue or add reactions to this issue comment.

👍 : I've tested v5-rc and it works fine for me.
👎 : I've tested v5-rc and found an issue. < Comment below!
👀 : I'll try it later.

[pavitra-infocusp]

Is it intentional to push an RC release to the latest?

Anyways, my app doesn't work. It crashed when I open the page :(

Unexpected Application 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.
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.
    at checkForNestedUpdates (http://localhost:5173/node_modules/.vite/deps/chunk-HHZE2HUH.js?v=9df50b02:19659:19)
    at scheduleUpdateOnFiber (http://localhost:5173/node_modules/.vite/deps/chunk-HHZE2HUH.js?v=9df50b02:18533:11)
    at dispatchSetState (http://localhost:5173/node_modules/.vite/deps/chunk-HHZE2HUH.js?v=9df50b02:12403:15)
    at update (http://localhost:5173/node_modules/.vite/deps/@nextui-org_react.js?v=54cc688f:14580:11)
    at http://localhost:5173/node_modules/.vite/deps/@nextui-org_react.js?v=54cc688f:14583:7
    at commitHookEffectListMount (http://localhost:5173/node_modules/.vite/deps/chunk-HHZE2HUH.js?v=9df50b02:16915:34)
    at commitLayoutEffectOnFiber (http://localhost:5173/node_modules/.vite/deps/chunk-HHZE2HUH.js?v=9df50b02:17002:23)
    at commitLayoutMountEffects_complete (http://localhost:5173/node_modules/.vite/deps/chunk-HHZE2HUH.js?v=9df50b02:17980:17)
    at commitLayoutEffects_begin (http://localhost:5173/node_modules/.vite/deps/chunk-HHZE2HUH.js?v=9df50b02:17969:15)
    at commitLayoutEffects (http://localhost:5173/node_modules/.vite/deps/chunk-HHZE2HUH.js?v=9df50b02:17920:11)

Grepping the usages of useStore in the code:

const openModal = useStore((state) => state.openModal);

const [searchValue, setSearchValue] = useStore((state) => [state.searchValue, state.setSearchValue]);

const [statusFilter, setStatusFilter] = useStore((state) => [state.statusFilter, state.setStatusFilter]);

const [statusFilter, searchValue] = useStore((state) => [state.statusFilter, state.searchValue]);

const isOpen = useStore((state) => state.modalOpen);
const closeModal = useStore((state) => state.closeModal);

[dai-shi]

Yes, this is the last resort I can think of to get some feedback. related tweet
Thanks for reporting.
@pavitra-infocusp Can you try this?

zustand/docs/migrations/migrating-to-v5.md

Line 92 in b93e116

### Requiring stable selector outputs

[pavitra-infocusp]

@dai-shi I have updated the comment above with how I use zustand. It's a new and simple app. Do I have to provide a Fallback for all selectors? That would be so unnecessary, wouldn't it be?

[dai-shi]

const [searchValue, setSearchValue] = useStore((state) => [state.searchValue, state.setSearchValue]);

This looks bad. Even with v4, this can cause extra re-renders. So, in that sense, v5 catches such bugs.
The easiest fix would be to use useShallow.

provide a Fallback for all selectors?

In this case, that wouldn't solve it anyway.

[pavitra-infocusp]

So array == bad is the problem, because it creates a new array on each render?

[dai-shi]

it creates a new array on each render?

True.

[pavitra-infocusp]

-const [searchValue, setSearchValue] = useStore((state) => [state.searchValue, state.setSearchValue]);
+const searchValue = useStore((state) => state.searchValue);
+const setSearchValue = useStore((state) => state.setSearchValue);

Is this the only way to make the selector references stable? Is it possible to group them together to reduce boilerplate and function calls?

[dbritto-dev]

@pavitra-infocusp sure

const [searchValue, setSearchValue] = useStore(useShallow((state) => [state.searchValue, state.setSearchValue]));

[pavitra-infocusp]

Thanks @dai-shi and @dbritto-dev! Zustand v5 is now working fine.

[Olfdev]

I was having troubles as well on 5.0.0 rc2 where v4.5.5 was working fine (or at least, not telling me there was issues but was running fine). I spent a few hours trying to find the culprit because the error logs where completely useless.

1. Warning: The result of getSnapshot should be cached to avoid an infinite loop
2. Uncaught 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.

I had to use useShallow, that's it. Now I need to go see what this is all about to understand why this suddenly happened.

from:

const {tables, fetchTables} = useUserStore((state) => ({tables: state.tables, fetchTables: state.fetchTables}));

to:

const {tables, fetchTables} = useUserStore(useShallow(state) => ({tables: state.tables, fetchTables: state.fetchTables})));

[dai-shi]

Thanks for reporting! This is a bit unexpected to me, as my assumption was it can cause the infinite loop even in v4. I think we need to clarify this in the v5 migration guide.

👉 #2749

[mehimanshupatil]

typescript error when using with immer middleware and slice pattern.
error location Inside Immer callback, where function arguments are being spread (...a)
reproducible example

Types of parameters 'shouldReplace' and 'replace' are incompatible.
Type 'true' is not assignable to type 'false'.

[dai-shi]

Thanks reporting. #2580 is the related PR.
@Yonom Can you investigate it please? We need a test too.