Supported zustand 5.0-rc

[Jirayu-ninl]

Describe the feature

Problem: You will get 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.
Solution: Downgrade to zustand@4 and replace zustand/shallow with zustand/react/shallow

For other dependencies, it works as well
I use pnpm workspace, and here are my dependencies on my main project.

 "dependencies": {
    "@auth/prisma-adapter": "^2.5.2",
    "@aws-sdk/client-s3": "^3.658.0",
    "@aws-sdk/lib-storage": "^3.658.0",
    "@aws-sdk/s3-request-presigner": "^3.658.0",
    "@dnd-kit/core": "^6.1.0",
    "@dnd-kit/modifiers": "^7.0.0",
    "@dnd-kit/sortable": "^8.0.0",
    "@dnd-kit/utilities": "^3.2.2",
    "@ducanh2912/next-pwa": "^10.2.9",
    "@emotion/css": "^11.13.0",
    "@emotion/react": "^11.13.3",
    "@juggle/resize-observer": "^3.4.0",
    "@million/lint": "1.0.0-rc.84",
    "@nexel/cosmos": "workspace:*",
    "@nexel/nextjs": "workspace:*",
    "@nexel/prisma": "workspace:*",
    "@next/third-parties": "^14.2.13",
    "@primer/react": "^36.27.0",
    "@prisma/client": "^5.20.0",
    "@prisma/extension-accelerate": "^1.1.0",
    "@radix-ui/react-accordion": "^1.2.0",
    "@radix-ui/react-avatar": "^1.1.0",
    "@radix-ui/react-dialog": "^1.1.1",
    "@radix-ui/react-dropdown-menu": "^2.1.1",
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-label": "^2.1.0",
    "@radix-ui/react-menubar": "^1.1.1",
    "@radix-ui/react-popover": "^1.1.1",
    "@radix-ui/react-select": "^2.1.1",
    "@radix-ui/react-slot": "^1.1.0",
    "@radix-ui/react-switch": "^1.1.0",
    "@radix-ui/react-tabs": "^1.1.0",
    "@react-three/csg": "^3.2.0",
    "@react-three/drei": "^9.114.0",
    "@react-three/fiber": "^8.17.8",
    "@react-three/flex": "^1.0.1",
    "@react-three/postprocessing": "^2.16.2",
    "@react-three/rapier": "^1.4.0",
    "@scalar/nextjs-api-reference": "^0.4.89",
    "@sentry/nextjs": "^8.32.0",
    "@t3-oss/env-nextjs": "^0.11.1",
    "@tanstack/react-query": "4.36.1",
    "@trpc/client": "^10.45.2",
    "@trpc/react-query": "^10.45.2",
    "@trpc/server": "^10.45.2",
    "bcryptjs": "^2.4.3",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "cmdk": "^1.0.0",
    "component-material": "^1.0.7",
    "cookie": "^0.6.0",
    "detect-gpu": "^5.0.49",
    "dotenv": "^16.4.5",
    "dotenv-cli": "^7.4.2",
    "framer-motion": "^11.7.0",
    "framer-motion-3d": "^11.7.0",
    "global": "^4.4.0",
    "glsl-constants": "^2.0.1",
    "glsl-curl-noise2": "^0.0.4",
    "glsl-film-grain": "^1.0.4",
    "glsl-lut": "^1.1.3",
    "glsl-map": "^1.0.1",
    "glsl-noise": "^0.0.0",
    "glsl-noise-simplex": "^0.0.2",
    "glsl-random": "^0.0.5",
    "glsl-scale-linear": "^1.0.0",
    "glsl-scale-log": "^1.0.0",
    "glsl-transpose": "^1.0.0",
    "glsl-voronoi-noise": "^1.2.2",
    "glsl-waves": "^0.0.2",
    "glsl-worley": "^1.0.2",
    "glslify": "^7.1.1",
    "graphql": "^16.9.0",
    "graphql-request": "^7.1.0",
    "ioredis": "^5.4.1",
    "isomorphic-dompurify": "^2.15.0",
    "js-cookie": "^3.0.5",
    "lamina": "^1.1.23",
    "lodash-es": "^4.17.21",
    "lodash.throttle": "^4.1.1",
    "lucide-react": "^0.446.0",
    "maath": "^0.10.8",
    "material-composer": "^0.2.6",
    "material-composer-r3f": "^0.2.5",
    "million": "^3.1.11",
    "next": "14.2.13",
    "next-auth": "^4.24.7",
    "next-axiom": "^1.5.1",
    "next-share": "^0.27.0",
    "nodemailer": "^6.9.15",
    "nprogress": "^0.2.0",
    "path-to-regexp": "^8.1.0",
    "postprocessing": "^6.36.2",
    "re-resizable": "^6.10.0",
    "react": "18.3.1",
    "react-day-picker": "^9.1.2",
    "react-dom": "18.3.1",
    "react-hook-form": "^7.53.0",
    "react-icons": "^5.3.0",
    "react-intersection-observer": "^9.13.1",
    "react-rnd": "^10.4.13",
    "react-syntax-highlighter": "^15.5.0",
    "react-toastify": "^10.0.5",
    "sharp": "^0.33.5",
    "stripe": "^16.12.0",
    "superjson": "^2.2.1",
    "tailwind-merge": "^2.5.2",
    "tailwindcss-animate": "^1.0.7",
    "three": "^0.168.0",
    "three-custom-shader-material": "^6.0.3",
    "three-stdlib": "^2.33.0",
    "use-sync-external-store": "^1.2.2",
    "uuidv7": "^1.0.2",
    "vaul": "^0.9.6",
    "ws": "^8.18.0",
    "zod": "^3.23.8",
    "zustand": "4.5.5"
  },
  "devDependencies": {
    "@eslint/js": "^9.11.1",
    "@next/bundle-analyzer": "^14.2.13",
    "@pandacss/dev": "^0.46.1",
    "@types/bcryptjs": "^2.4.6",
    "@types/cookie": "^0.6.0",
    "@types/envinfo": "^7.8.4",
    "@types/js-cookie": "^3.0.6",
    "@types/lodash-es": "^4.17.12",
    "@types/lodash.throttle": "^4.1.9",
    "@types/multer": "^1.4.12",
    "@types/node": "^22.7.0",
    "@types/nprogress": "^0.2.3",
    "@types/react": "^18.3.9",
    "@types/react-syntax-highlighter": "^15.5.13",
    "@types/three": "^0.168.0",
    "@types/ws": "^8.5.12",
    "autoprefixer": "^10.4.20",
    "eslint": "^9.11.1",
    "eslint-plugin-react": "^7.36.1",
    "file-loader": "^6.2.0",
    "glob": "^11.0.0",
    "globals": "^15.9.0",
    "glslify-import-loader": "^0.1.2",
    "glslify-loader": "^2.0.0",
    "lygia": "^1.1.3",
    "next-compose-plugins": "^2.2.1",
    "postcss": "^8.4.47",
    "postcss-nesting": "^13.0.0",
    "prettier": "^3.3.3",
    "prettier-plugin-tailwindcss": "^0.6.8",
    "raw-loader": "^4.0.2",
    "rimraf": "^6.0.1",
    "tailwindcss": "^3.4.13",
    "typescript": "^5.6.2",
    "typescript-eslint": "^8.7.0",
    "url-loader": "^4.1.1"
  }

Additional information

• Would you be willing to help implement this feature?

[github-actions]

Thanks for opening this issue! A maintainer will review it soon.

[aidenybai]

Looking into this now! @Jirayu-ninl