updates here and trhere

components/header/index.js

@@ -3,13 +3,11 @@ import cn from 'clsx'
 import { Navigation } from 'components/navigation'
 import { useStore } from 'libs/store'
 import { forwardRef } from 'react'
-import { shallow } from 'zustand/shallow'
 import s from './header.module.scss'
 
 export const Header = forwardRef((_, ref) => {
   const [navIsOpened, setNavIsOpened] = useStore(
     ({ navIsOpened, setNavIsOpened }) => [navIsOpened, setNavIsOpened],
-    shallow
   )
 
   return (

components/navigation/index.js

@@ -4,13 +4,11 @@ import cn from 'clsx'
 import { useStore } from 'libs/store'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
-import { shallow } from 'zustand/shallow'
 import s from './navigation.module.scss'
 
 export function Navigation() {
   const [navIsOpened, setNavIsOpened] = useStore(
     ({ navIsOpened, setNavIsOpened }) => [navIsOpened, setNavIsOpened],
-    shallow
   )
 
   const router = useRouter()

libs/orchestra/index.js

@@ -3,14 +3,14 @@ import { del, get, set } from 'idb-keyval'
 import { broadcast } from 'libs/zustand-broadcast'
 import dynamic from 'next/dynamic'
 import { useEffect } from 'react'
-import { create } from 'zustand'
 import { createJSONStorage, persist } from 'zustand/middleware'
 import { shallow } from 'zustand/shallow'
+import { createWithEqualityFn } from 'zustand/traditional'
 import s from './orchestra.module.scss'
 
 const Studio = dynamic(
   () => import('libs/theatre/studio').then(({ Studio }) => Studio),
-  { ssr: false }
+  { ssr: false },
 )
 const Stats = dynamic(() => import('./stats').then(({ Stats }) => Stats), {
   ssr: false,
@@ -19,14 +19,17 @@ const GridDebugger = dynamic(
   () => import('./grid').then(({ GridDebugger }) => GridDebugger),
   {
     ssr: false,
-  }
+  },
 )
 
 // avoid to display debug tools on orchestra page
-const useInternalStore = create((set) => ({
-  isVisible: true,
-  setIsVisible: (isVisible) => set({ isVisible }),
-}))
+const useInternalStore = createWithEqualityFn(
+  (set) => ({
+    isVisible: true,
+    setIsVisible: (isVisible) => set({ isVisible }),
+  }),
+  shallow,
+)
 
 // https://github.com/pmndrs/zustand/blob/main/docs/integrations/persisting-store-data.md
 const INDEXEDDB_STORAGE = {
@@ -44,7 +47,7 @@ const INDEXEDDB_STORAGE = {
   },
 }
 
-export const useOrchestraStore = create(
+export const useOrchestraStore = createWithEqualityFn(
   persist(
     () => ({
       studio: false,
@@ -54,8 +57,9 @@ export const useOrchestraStore = create(
     {
       name: 'orchestra',
       storage: createJSONStorage(() => INDEXEDDB_STORAGE),
-    }
-  )
+    },
+  ),
+  shallow,
 )
 
 broadcast(useOrchestraStore, 'orchestra')
@@ -65,7 +69,7 @@ export function Orchestra() {
 
   const { studio, stats, grid } = useOrchestraStore(
     ({ studio, stats, grid }) => ({ studio, stats, grid }),
-    shallow
+    shallow,
   )
 
   return (

libs/store.js

@@ -1,12 +1,16 @@
-import { create } from 'zustand'
+import { shallow } from 'zustand/shallow'
+import { createWithEqualityFn } from 'zustand/traditional'
 
-export const useStore = create((set) => ({
-  headerData: undefined,
-  setHeaderData: (headerData) => set({ headerData }),
-  footerData: undefined,
-  setFooterData: (footerData) => set({ footerData }),
-  navIsOpened: false,
-  setNavIsOpened: (value) => set({ navIsOpened: value }),
-  triggerTransition: false,
-  setTriggerTransition: (triggerTransition) => set({ triggerTransition }),
-}))
+export const useStore = createWithEqualityFn(
+  (set) => ({
+    headerData: undefined,
+    setHeaderData: (headerData) => set({ headerData }),
+    footerData: undefined,
+    setFooterData: (footerData) => set({ footerData }),
+    navIsOpened: false,
+    setNavIsOpened: (value) => set({ navIsOpened: value }),
+    triggerTransition: false,
+    setTriggerTransition: (triggerTransition) => set({ triggerTransition }),
+  }),
+  shallow,
+)

package.json

@@ -14,9 +14,9 @@
   },
   "dependencies": {
     "@ducanh2912/next-pwa": "^9.5.0",
-    "@studio-freight/compono": "^0.0.37",
+    "@studio-freight/compono": "^0.0.40",
     "@studio-freight/hamo": "^0.6.19",
-    "@studio-freight/react-lenis": "0.0.26",
+    "@studio-freight/react-lenis": "0.0.28",
     "@studio-freight/tempus": "^0.0.38",
     "@theatre/core": "^0.7.0",
     "@theatre/studio": "^0.7.0",
@@ -25,26 +25,26 @@
     "idb-keyval": "^6.2.1",
     "jsonminify": "^0.4.2",
     "next": "13.4.19",
-    "next-sitemap": "^4.2.2",
+    "next-sitemap": "^4.2.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "sass": "^1.66.1",
     "stats.js": "^0.17.0",
     "zustand": "4.4.1"
   },
   "devDependencies": {
-    "@builder.io/partytown": "^0.8.0",
-    "@cerner/duplicate-package-checker-webpack-plugin": "^2.3.0",
+    "@builder.io/partytown": "^0.8.1",
+    "@cerner/duplicate-package-checker-webpack-plugin": "^2.5.0",
     "@next/bundle-analyzer": "^13.4.19",
-    "@size-limit/preset-app": "^8.2.6",
+    "@size-limit/preset-app": "^9.0.0",
     "@svgr/webpack": "^8.1.0",
     "critters": "^0.0.20",
     "cross-env": "^7.0.3",
-    "eslint": "8.47.0",
+    "eslint": "8.49.0",
     "eslint-config-next": "^13.4.19",
     "eslint-config-prettier": "^9.0.0",
     "husky": "^8.0.3",
-    "prettier": "^3.0.2",
+    "prettier": "^3.0.3",
     "prettier-eslint": "^15.0.1"
   },
   "lint-staged": {