RFC: How is v5-alpha? about zustand

[dai-shi]

5.0.0-alpha.5 is published. 👍 / 👎 / 👀

[dai-shi]

5.0.0-alpha.4 is published. 👍 / 👎 / 👀

[dai-shi]

5.0.0-alpha.6 is published. CJS build was broken in alpha.4 and alpha.5.

[jacargentina]

5.0.0-alpha.6 works fine! Even resolves my react-native described here #1967

[dai-shi]

I'm not sure if some best practices were violated that caused this problem?

Yes, you create a new reference every time in your selector function.

// an easy reproduction
const useFooStore = create((set) => ({
  todos: [],
}))

  // this will cause an infinite loop because of new reference every render
  useFooStore((state) => state.todos.map((todo) => todo.id))

To resolve it, either use createWithEqualityFn & shallow or useShallow.

This infinite-loop behavior can happen without Zustand, and Zustand follows the same behavior.

[dai-shi]

After using reselect, this problem was also solved.

FYI, proxy-memoize also works. https://redux.js.org/usage/deriving-data-selectors#proxy-memoize

[charkour]

5.0.0-alpha.5 works with [email protected]

[dbritto-dev]

#2138

@flq here you go -> #2138

[dai-shi]

Thanks for reporting.
It's an intentional breaking change in #2395.
We would like to add a note in migration guide in docs. Can you create a minimal reproduction to help the docs?

[jacargentina]

Maybe this ordering on "exports" can be changed for RN users of zustand ?

#1967 (reply in thread)

[dbritto-dev]

Maybe this ordering on "exports" can be changed for RN users of zustand ?

#1967 (reply in thread)

@jacargentina let me take care of that

[jacargentina]

@dbritto-dev I've solved it by configuring in metro.config.js:

config.resolver.unstable_conditionNames = ['require'];

default is ['require', 'import'] so that import was causing my problem.

[dbritto-dev]

@jacargentina nice, I found that yesterday too but I didn't have time to answer any question. We shall add it to the docs.

[flq]

Does the readme of the v5 branch already reflect the changes that will be coming up in v5 or is there some other place where one could read about it?

[cqh963852]

5.0.0-alpha.6 fails

5.0.0-alpha.5 fails

5.0.0-alpha.4 work fine

[cqh963852]

Can you create a minimal reproduction to help the docs?

I will create an example later.

---

I can first describe how I encountered this problem.

I first migrated from redux toolkit to zustand^4 and everything worked fine.
Then I upgraded [email protected]

The reason for this problem may be that Redux useSelector's callback do'not need to be wrapped by useCallback.

After #2395, which may have caused the issue.

Maybe useSyncExternalStoreWithSelector would be more suitable?

[cqh963852]

https://stackblitz.com/edit/vitejs-vite-qvlgmz?file=src%2Fcomponents%2FTodolist.tsx

@dai-shi I have create a todo list demo with this bug.

The reason why it fails is because of the use of the useTodoFindIds function.

Of course, the actual scenario is more complicated than what is written here. I want to find a set of data and then return their IDs.

I'm not sure if some best practices were violated that caused this problem?

[cqh963852]

After using reselect, this problem was also solved.

For RTK users migrating to zustand@next. Maybe be more familiar with reselect.

I think this can be added to the migration manual.

[dbritto-dev]

@flq yeah, I'll add it. btw, they talk about memoizing selectors.