🐛 (zustand) useShallow [b] (#2910)

Well, turns out I did need to follow this 😅 : - https://github.com/pmndrs/zustand/blob/main/docs/migrations/migrating-to-v5.md
JeromeFitz · Oct 20, 2024 · 90c3e7b · 90c3e7b
1 parent 7468f6a
commit 90c3e7b
Show file tree

Hide file tree

Showing 12 changed files with 114 additions and 89 deletions.
diff --git a/...jeromefitzgerald.com/src/app/(notion)/currently/listening-to/_components/Music.client.tsx b/...jeromefitzgerald.com/src/app/(notion)/currently/listening-to/_components/Music.client.tsx
@@ -41,16 +41,18 @@ import { HeaderSidebar } from '@/app/playground/2024/_components/Header.Sidebar'
 // import { Grid } from '@/components/Grid/index'
 import { LI, UL } from '@/components/List/index'
 import { bandcamps } from '@/data/bandcamps'
-import { useStore as _useStore } from '@/store/index'
+import { useStore as _useStore, useShallow } from '@/store/index'
 import { getKey, INIT } from '@/utils/getKey'
 
 const useStore = () => {
-  return _useStore((store) => ({
-    spotifyTimeRange: store.spotifyTimeRange,
-    spotifyTimeRangeSet: store.spotifyTimeRangeSet,
-    spotifyType: store.spotifyType,
-    spotifyTypeSet: store.spotifyTypeSet,
-  }))
+  return _useStore(
+    useShallow((store) => ({
+      spotifyTimeRange: store.spotifyTimeRange,
+      spotifyTimeRangeSet: store.spotifyTimeRangeSet,
+      spotifyType: store.spotifyType,
+      spotifyTypeSet: store.spotifyTypeSet,
+    })),
+  )
 }
 
 const HOUR = 3600000

diff --git a/sites/jeromefitzgerald.com/src/app/(notion)/currently/reading/_components/Book.client.tsx b/sites/jeromefitzgerald.com/src/app/(notion)/currently/reading/_components/Book.client.tsx
@@ -39,13 +39,15 @@ import { HeaderSidebar } from '@/app/playground/2024/_components/Header.Sidebar'
 // import { Lorem } from '@/app/playground/2024/_components/Lorem'
 // import { Image } from '@/app/(notion)/events/[[...catchAll]]/_components/Image'
 import { LI, UL } from '@/components/List/index'
-import { useStore as _useStore } from '@/store/index'
+import { useStore as _useStore, useShallow } from '@/store/index'
 
 const useStore = () => {
-  return _useStore((store) => ({
-    bookStatus: store.bookStatus,
-    bookStatusSet: store.bookStatusSet,
-  }))
+  return _useStore(
+    useShallow((store) => ({
+      bookStatus: store.bookStatus,
+      bookStatusSet: store.bookStatusSet,
+    })),
+  )
 }
 
 const stores = [

diff --git a/sites/jeromefitzgerald.com/src/app/_temp/Footer.Cmdk.client.tsx b/sites/jeromefitzgerald.com/src/app/_temp/Footer.Cmdk.client.tsx
@@ -6,13 +6,15 @@ import { Kbd } from '@radix-ui/themes/dist/esm/components/kbd.js'
 import { Skeleton } from '@radix-ui/themes/dist/esm/components/skeleton.js'
 import { Text } from '@radix-ui/themes/dist/esm/components/text.js'
 
-import { useStore as _useStore } from '@/store/index'
+import { useStore as _useStore, useShallow } from '@/store/index'
 
 const useStore = () => {
-  return _useStore((store) => ({
-    isCmdkOpen: store.isCmdkOpen,
-    isCmdkOpenSet: store.isCmdkOpenSet,
-  }))
+  return _useStore(
+    useShallow((store) => ({
+      isCmdkOpen: store.isCmdkOpen,
+      isCmdkOpenSet: store.isCmdkOpenSet,
+    })),
+  )
 }
 
 function FooterCmdkClient({ isLoading }) {

diff --git a/sites/jeromefitzgerald.com/src/app/playground/2024/_components/Navigation.Primary.tsx b/sites/jeromefitzgerald.com/src/app/playground/2024/_components/Navigation.Primary.tsx
@@ -25,13 +25,15 @@ import { Text } from '@radix-ui/themes/dist/esm/components/text.js'
 import NextLink from 'next/link'
 import { useState } from 'react'
 
-import { useStore as _useStore } from '@/store/index'
+import { useStore as _useStore, useShallow } from '@/store/index'
 
 const useStore = () => {
-  return _useStore((store) => ({
-    isOverlay: store.isOverlay,
-    isOverlaySet: store.isOverlaySet,
-  }))
+  return _useStore(
+    useShallow((store) => ({
+      isOverlay: store.isOverlay,
+      isOverlaySet: store.isOverlaySet,
+    })),
+  )
 }
 
 const image = {

diff --git a/sites/jeromefitzgerald.com/src/app/playground/2024/_components/Navigation.Secondary.tsx b/sites/jeromefitzgerald.com/src/app/playground/2024/_components/Navigation.Secondary.tsx
@@ -21,16 +21,18 @@ import { Text } from '@radix-ui/themes/dist/esm/components/text.js'
 import { useRouter } from 'next/navigation.js'
 import { Fragment } from 'react'
 
-import { useStore as _useStore } from '@/store/index'
+import { useStore as _useStore, useShallow } from '@/store/index'
 
 const useStore = () => {
-  return _useStore((store) => ({
-    zzz_menuSecondary: store.zzz_menuSecondary,
-    zzz_menuSecondaryActive: store.zzz_menuSecondaryActive,
-    zzz_menuSecondaryActiveSet: store.zzz_menuSecondaryActiveSet,
-    zzz_menuTertiary: store.zzz_menuTertiary,
-    zzz_menuTertiaryActiveSet: store.zzz_menuTertiaryActiveSet,
-  }))
+  return _useStore(
+    useShallow((store) => ({
+      zzz_menuSecondary: store.zzz_menuSecondary,
+      zzz_menuSecondaryActive: store.zzz_menuSecondaryActive,
+      zzz_menuSecondaryActiveSet: store.zzz_menuSecondaryActiveSet,
+      zzz_menuTertiary: store.zzz_menuTertiary,
+      zzz_menuTertiaryActiveSet: store.zzz_menuTertiaryActiveSet,
+    })),
+  )
 }
 
 function NavigationSecondary({ order = 0 }) {

diff --git a/sites/jeromefitzgerald.com/src/app/playground/2024/_components/Navigation.Tertiary.tsx b/sites/jeromefitzgerald.com/src/app/playground/2024/_components/Navigation.Tertiary.tsx
@@ -19,15 +19,17 @@ import { Text } from '@radix-ui/themes/dist/esm/components/text.js'
 import { useRouter } from 'next/navigation.js'
 import { Fragment } from 'react'
 
-import { useStore as _useStore } from '@/store/index'
+import { useStore as _useStore, useShallow } from '@/store/index'
 
 const useStore = () => {
-  return _useStore((store) => ({
-    zzz_menuSecondaryActive: store.zzz_menuSecondaryActive,
-    zzz_menuTertiary: store.zzz_menuTertiary,
-    zzz_menuTertiaryActive: store.zzz_menuTertiaryActive,
-    zzz_menuTertiaryActiveSet: store.zzz_menuTertiaryActiveSet,
-  }))
+  return _useStore(
+    useShallow((store) => ({
+      zzz_menuSecondaryActive: store.zzz_menuSecondaryActive,
+      zzz_menuTertiary: store.zzz_menuTertiary,
+      zzz_menuTertiaryActive: store.zzz_menuTertiaryActive,
+      zzz_menuTertiaryActiveSet: store.zzz_menuTertiaryActiveSet,
+    })),
+  )
 }
 
 // @todo(complexity) 11

diff --git a/sites/jeromefitzgerald.com/src/app/playground/2024/_components/Overlay.tsx b/sites/jeromefitzgerald.com/src/app/playground/2024/_components/Overlay.tsx
@@ -1,12 +1,14 @@
 'use client'
 import { cx } from '@jeromefitz/ds/utils/cx'
 
-import { useStore as _useStore } from '@/store/index'
+import { useStore as _useStore, useShallow } from '@/store/index'
 
 const useStore = () => {
-  return _useStore((store) => ({
-    isOverlay: store.isOverlay,
-  }))
+  return _useStore(
+    useShallow((store) => ({
+      isOverlay: store.isOverlay,
+    })),
+  )
 }
 
 function Overlay() {

diff --git a/sites/jeromefitzgerald.com/src/components/Cmdk/Cmdk.tsx b/sites/jeromefitzgerald.com/src/components/Cmdk/Cmdk.tsx
@@ -16,7 +16,7 @@ import { useTheme } from 'next-themes'
 import { useEffect, useMemo, useRef, useState } from 'react'
 
 import { menus } from '@/data/menu'
-import { useStore as _useStore } from '@/store/index'
+import { useStore as _useStore, useShallow } from '@/store/index'
 
 import { Logo } from './Icons'
 
@@ -29,17 +29,19 @@ function getIconViaParentChild(parent, child) {
 }
 
 const useStore = () => {
-  return _useStore((store) => ({
-    cmdkInput: store.cmdkInput,
-    cmdkInputSet: store.cmdkInputSet,
-    cmdkPages: store.cmdkPages,
-    cmdkPagesSet: store.cmdkPagesSet,
-    cmdkPagesSetRemove: store.cmdkPagesSetRemove,
-    isCmdkInnerOpen: store.isCmdkInnerOpen,
-    isCmdkInnerOpenSet: store.isCmdkInnerOpenSet,
-    isCmdkOpen: store.isCmdkOpen,
-    isCmdkOpenSet: store.isCmdkOpenSet,
-  }))
+  return _useStore(
+    useShallow((store) => ({
+      cmdkInput: store.cmdkInput,
+      cmdkInputSet: store.cmdkInputSet,
+      cmdkPages: store.cmdkPages,
+      cmdkPagesSet: store.cmdkPagesSet,
+      cmdkPagesSetRemove: store.cmdkPagesSetRemove,
+      isCmdkInnerOpen: store.isCmdkInnerOpen,
+      isCmdkInnerOpenSet: store.isCmdkInnerOpenSet,
+      isCmdkOpen: store.isCmdkOpen,
+      isCmdkOpenSet: store.isCmdkOpenSet,
+    })),
+  )
 }
 
 function CMDKWrapper(props: { children: ReactNode } & MotionProps) {

diff --git a/sites/jeromefitzgerald.com/src/components/Layout/Layout.client.tsx b/sites/jeromefitzgerald.com/src/components/Layout/Layout.client.tsx
@@ -3,13 +3,15 @@ import { cx } from '@jeromefitz/ds/utils/cx'
 
 import { motion } from 'framer-motion'
 
-import { useStore as _useStore } from '@/store/index'
+import { useStore as _useStore, useShallow } from '@/store/index'
 
 const useStore = () => {
-  return _useStore((store) => ({
-    isWidgetOpen: store.isWidgetOpen,
-    isWidgetOpenSet: store.isWidgetOpenSet,
-  }))
+  return _useStore(
+    useShallow((store) => ({
+      isWidgetOpen: store.isWidgetOpen,
+      isWidgetOpenSet: store.isWidgetOpenSet,
+    })),
+  )
 }
 
 function LayoutClient() {

diff --git a/sites/jeromefitzgerald.com/src/components/Providers/RouterEventProvider.Loading.client.tsx b/sites/jeromefitzgerald.com/src/components/Providers/RouterEventProvider.Loading.client.tsx
@@ -7,17 +7,19 @@ import { usePathname } from 'next/navigation.js'
 // import { motion } from 'framer-motion'
 import { useEffect } from 'react'
 
-import { useStore as _useStore } from '@/store/index'
+import { useStore as _useStore, useShallow } from '@/store/index'
 
 const useStore = () => {
-  return _useStore((store) => ({
-    zzz_menuSecondary: store.zzz_menuSecondary,
-    zzz_menuSecondaryActive: store.zzz_menuSecondaryActive,
-    zzz_menuSecondaryActiveSet: store.zzz_menuSecondaryActiveSet,
-    zzz_menuTertiary: store.zzz_menuTertiary,
-    zzz_menuTertiaryActive: store.zzz_menuTertiaryActive,
-    zzz_menuTertiaryActiveSet: store.zzz_menuTertiaryActiveSet,
-  }))
+  return _useStore(
+    useShallow((store) => ({
+      zzz_menuSecondary: store.zzz_menuSecondary,
+      zzz_menuSecondaryActive: store.zzz_menuSecondaryActive,
+      zzz_menuSecondaryActiveSet: store.zzz_menuSecondaryActiveSet,
+      zzz_menuTertiary: store.zzz_menuTertiary,
+      zzz_menuTertiaryActive: store.zzz_menuTertiaryActive,
+      zzz_menuTertiaryActiveSet: store.zzz_menuTertiaryActiveSet,
+    })),
+  )
 }
 
 const Loading: React.FC<{ isRouteChanging: boolean }> = ({ isRouteChanging }) => {

diff --git a/sites/jeromefitzgerald.com/src/components/Providers/RouterEventProvider.client.tsx b/sites/jeromefitzgerald.com/src/components/Providers/RouterEventProvider.client.tsx
@@ -4,7 +4,7 @@ import dynamic from 'next/dynamic.js'
 import { usePathname } from 'next/navigation.js'
 import { useEffect, useState } from 'react'
 
-import { useStore as _useStore } from '@/store/index'
+import { useStore as _useStore, useShallow } from '@/store/index'
 
 // import { Loading } from './RouterEventProvider.Loading.client'
 const Loading = dynamic(
@@ -18,10 +18,12 @@ const Loading = dynamic(
 )
 
 const useStore = () => {
-  return _useStore((store) => ({
-    isRouteChanging: store.isRouteChanging,
-    isRouteChangingSet: store.isRouteChangingSet,
-  }))
+  return _useStore(
+    useShallow((store) => ({
+      isRouteChanging: store.isRouteChanging,
+      isRouteChangingSet: store.isRouteChangingSet,
+    })),
+  )
 }
 
 function RouterEventProvider() {

diff --git a/sites/jeromefitzgerald.com/src/store/index.tsx b/sites/jeromefitzgerald.com/src/store/index.tsx
@@ -23,6 +23,7 @@ import type { StoreApi } from 'zustand'
 
 import { createContext, useContext, useRef } from 'react'
 import { useStore as useZustandStore } from 'zustand'
+import { useShallow } from 'zustand/shallow'
 import { createStore } from 'zustand/vanilla'
 
 // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
@@ -46,37 +47,39 @@ const useStore = <T,>(selector: (state: any) => T): T => {
   return useZustandStore(store, selector)
 }
 
+const FALLBACK_ACTION = () => {}
+
 const getDefaultInitialStateStoreMenu = () => ({
   bookStatus: 'in-progress',
-  bookStatusSet: () => {},
+  bookStatusSet: FALLBACK_ACTION,
   cmdkInput: '',
-  cmdkInputSet: () => {},
+  cmdkInputSet: FALLBACK_ACTION,
   cmdkPages: [],
-  cmdkPagesSet: () => {},
-  cmdkPagesSetRemove: () => {},
+  cmdkPagesSet: FALLBACK_ACTION,
+  cmdkPagesSetRemove: FALLBACK_ACTION,
   count: 0,
-  countSet: () => {},
+  countSet: FALLBACK_ACTION,
   current: 0,
-  currentSet: () => {},
+  currentSet: FALLBACK_ACTION,
   isCmdkInnerOpen: false,
-  isCmdkInnerOpenSet: () => {},
+  isCmdkInnerOpenSet: FALLBACK_ACTION,
   isCmdkOpen: false,
-  isCmdkOpenSet: () => {},
+  isCmdkOpenSet: FALLBACK_ACTION,
   isMenuMobileOpen: false,
-  isMenuMobileOpenSet: () => {},
+  isMenuMobileOpenSet: FALLBACK_ACTION,
   isOverlay: false,
-  isOverlaySet: () => {},
+  isOverlaySet: FALLBACK_ACTION,
   isRouteChanging: false,
-  isRouteChangingSet: () => {},
+  isRouteChangingSet: FALLBACK_ACTION,
   isWidgetOpen: false,
-  isWidgetOpenSet: () => {},
+  isWidgetOpenSet: FALLBACK_ACTION,
   seen: 0,
-  seenSetDecrease: () => {},
-  seenSetIncrease: () => {},
+  seenSetDecrease: FALLBACK_ACTION,
+  seenSetIncrease: FALLBACK_ACTION,
   spotifyTimeRange: 'medium_term',
-  spotifyTimeRangeSet: () => {},
+  spotifyTimeRangeSet: FALLBACK_ACTION,
   spotifyType: 'top-tracks',
-  spotifyTypeSet: () => {},
+  spotifyTypeSet: FALLBACK_ACTION,
   // @wip(menu)
   zzz_menuSecondary: [
     {
@@ -495,4 +498,4 @@ const initializeStoreMenu = (preloadedState: Partial<any> = {}) => {
   }))
 }
 
-export { initializeStoreMenu, Provider, useStore }
+export { initializeStoreMenu, Provider, useShallow, useStore }