Merge pull request #169 from axiomhq/dedupe-logger

feat: dedupe useLogger

package.json

@@ -1,7 +1,7 @@
 {
   "name": "next-axiom",
   "description": "Send WebVitals from your Next.js project to Axiom.",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "author": "Axiom, Inc.",
   "license": "MIT",
   "contributors": [
@@ -52,6 +52,7 @@
     "typescript": "^5.1.6"
   },
   "dependencies": {
+    "remeda": "^1.29.0",
     "whatwg-fetch": "^3.6.2"
   }
 }

src/hooks.ts

@@ -1,9 +1,21 @@
 import { usePathname } from 'next/navigation';
 import { Logger, LoggerConfig } from './logger';
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
+import { useDeepMemo } from './util';
 
 export function useLogger(config: LoggerConfig = {}): Logger {
   const path = usePathname();
+
+  const memoizedConfig = useDeepMemo({
+    ...config,
+    args: {
+      ...(config.args ?? {}),
+      path,
+    },
+  });
+
+  const logger = useMemo(() => new Logger(memoizedConfig), [memoizedConfig]);
+
   useEffect(() => {
     return () => {
       if (logger) {
@@ -12,11 +24,5 @@ export function useLogger(config: LoggerConfig = {}): Logger {
     };
   }, [path]);
 
-  if (!config.args) {
-    config.args = {};
-  }
-  config.args.path = path;
-
-  const logger = new Logger(config);
   return logger;
 }

src/util.ts

@@ -0,0 +1,12 @@
+import { useRef } from 'react';
+import { equals } from 'remeda';
+
+export function useDeepMemo<T extends Record<string, unknown>>(value: T) {
+  const ref = useRef<T>();
+
+  if (!equals(value, ref.current)) {
+    ref.current = value;
+  }
+
+  return ref.current;
+}