Error: Maximum update depth exceeded in NEXTJS

[Arghyahub]

Bug Description

In Nextjs importing states like this causes an error where react goes into recursion and crashesh

Store

import { UserEntity } from "@/lib/entities/user-entity";
import { create } from "zustand";
export interface UserStoreType {
  User: UserEntity;
  setUser: (user: UserEntity) => void;
  setSomeUser: (obj: Partial<UserEntity>) => void;
  resetUser: () => void;
}

export const useUserStore = create<UserStoreType>()((set) => ({
  User: new UserEntity(),
  setUser: (User) => set({ User }),
  setSomeUser: (obj) => set((state) => ({ User: { ...state.User, ...obj } })),
  resetUser: () => set({ User: new UserEntity() }),
}));

export default useUserStore;

Component

"use client";
import React, { useEffect } from "react";
import BackgroundImage from "@/public/background.jpg";
import Image from "next/image";
import useUserStore from "@/store/user-store";

type Props = {};

const Home = (props: Props) => {
  const { User, setUser, setSomeUser } = useUserStore((state) => ({
    User: state.User,
    setSomeUser: state.setSomeUser,
    setUser: state.setUser,
  }));

  return (
       <div className="">
            <button onClick={handleAddUser}>Set User</button>
            <button onClick={handleUpdate}>Update User</button>
       </div>
  )
};

export default Home;

Importing in this way causes the problem but importing it like const User = useUserStore(state => state.User) works fine.

Complete error: 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.

Reproduction Link

[dai-shi]

Please try this:

  const { User, setUser, setSomeUser } = useUserStore(useShallow((state) => ({
    User: state.User,
    setSomeUser: state.setSomeUser,
    setUser: state.setUser,
  })));

[igortas]

@dai-shi Zustand 5, behave totally different for the same component called in different places, while in one place I don't get maximum stack error, I get it in other place. Problem is, I have thousand of places where I have selectors like:

useUserStore(state => state.user.id)

so this is really bad breaking change, and really I don't know where to put shallow wrapper, I have thousands of selectors in many components, I really didn't bothered to make wrapper selectors....

[dai-shi]

useUserStore(state => state.user.id)

This should never cause infinite loops both in v4 and v5.

really I don't know where to put shallow wrapper

Use createWithEqualityFn in the meantime:

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

Lines 146 to 151 in 0007ef4

	Alternatively, if you need v4 behavior, `createWithEqualityFn` will do.
	```js
	// v5
	import { createWithEqualityFn as create } from 'zustand/traditional'
	```

I guess eventually you want to fix the infinite loops. As #2789 says, it may improve the performance.

[igortas]

@dai-shi
What selectors are problematic migrating to v5, without changing to createWithEqualityFn , object ones?

[dbritto-dev]

@igortas any selector without stable results, () => [], () => ({ someArray: [], someObject: {} })

[MrSimmmons]

Just ran into this making a new app. Good to see there is an option for addressing it, however if its known that un-stable results (() => [], () => ({ someArray: [], someObject: {} })) can cause this, why isn't useShallow applied to that function by default?