@graphcommerce/next-ui 9.0.0-canary.72 → 9.0.0-canary.74

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 9.0.0-canary.74
+
+## 9.0.0-canary.73
+
+### Patch Changes
+
+- [`4c24225`](https://github.com/graphcommerce-org/graphcommerce/commit/4c24225f9f998cd40e71da06528eb9323e9b6752) - Created a new `memoDeep` function that is a deep compare variant of `React.memo`. Performance seems to be pretty good, but should only be used as a result of a profiling session. ([@paales](https://github.com/paales))
+
 ## 9.0.0-canary.72
 
 ## 9.0.0-canary.71

package/Intl/ListFormat.tsx

@@ -22,8 +22,9 @@ export function ListFormat(props: ListFormatProps) {
 
   return (
     <>
-      {parts.map((part) => (
-        <React.Fragment key={part.value}>
+      {parts.map((part, index) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <React.Fragment key={index}>
           {part.type === 'literal' ? part.value : childArray[part.value]}
         </React.Fragment>
       ))}

package/hooks/index.ts

@@ -7,3 +7,4 @@ export * from './useStorefrontConfig'
 export * from './useUrlQuery'
 export * from './useIsSsr'
 export * from './useLocale'
+export * from './memoDeep'

package/hooks/memoDeep.ts

@@ -0,0 +1,38 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { equal } from '@wry/equality'
+import { FunctionComponent, memo, NamedExoticComponent } from 'react'
+
+/**
+ * This is a deep comparison version of React's `memo` function.
+ *
+ * This method isn't too expensive to run, but will be rerun every time a parent component is rendered.
+ *
+ * This should probably only be used as the result of a performance profiling session.
+ */
+export function memoDeep<P extends object>(
+  Component: FunctionComponent<P>,
+  measure: boolean = false,
+): NamedExoticComponent<P> {
+  return memo(
+    Component,
+    process.env.NODE_ENV === 'development' && measure
+      ? (prevProps, nextProps) => {
+          const start = performance.now()
+          const result = equal(prevProps, nextProps)
+          const ms = performance.now() - start
+
+          if (ms < 0.2) return result
+
+          console.log(`memoDeep took more than 0.2ms`, {
+            result,
+            ms,
+            Component,
+            prevProps,
+            nextProps,
+          })
+
+          return result
+        }
+      : equal,
+  )
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.0-canary.72",
+  "version": "9.0.0-canary.74",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -26,13 +26,13 @@
     "typescript": "5.5.3"
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.72",
-    "@graphcommerce/framer-next-pages": "^9.0.0-canary.72",
-    "@graphcommerce/framer-scroller": "^9.0.0-canary.72",
-    "@graphcommerce/framer-utils": "^9.0.0-canary.72",
-    "@graphcommerce/image": "^9.0.0-canary.72",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.72",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.72",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.74",
+    "@graphcommerce/framer-next-pages": "^9.0.0-canary.74",
+    "@graphcommerce/framer-scroller": "^9.0.0-canary.74",
+    "@graphcommerce/framer-utils": "^9.0.0-canary.74",
+    "@graphcommerce/image": "^9.0.0-canary.74",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.74",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.74",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/server.ts

@@ -6,3 +6,4 @@ export * from './utils/sitemap'
 export * from './utils/storefrontConfig'
 export * from './PageMeta/canonicalize'
 export * from './Document'
+export * from './utils/cookie'