From 3a79a983aa5c243d306b69d2872d3f596b985c7a Mon Sep 17 00:00:00 2001
From: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com>
Date: Fri, 4 Oct 2024 13:15:41 +0200
Subject: [PATCH] better logging

---
 app/components/Layout.jsx           |  2 +
 app/helpers/logging.js              | 40 +++++++++++++++
 app/routes/_index/route.jsx         | 37 +-------------
 app/routes/_index/sections/hero.jsx | 75 ++---------------------------
 4 files changed, 47 insertions(+), 107 deletions(-)
 create mode 100644 app/helpers/logging.js

diff --git a/app/components/Layout.jsx b/app/components/Layout.jsx
index 246e8ac..f5e61c9 100644
--- a/app/components/Layout.jsx
+++ b/app/components/Layout.jsx
@@ -9,6 +9,7 @@ import {
   PredictiveSearchForm,
   PredictiveSearchResults,
 } from '~/components/Search'
+import { useLogRerender } from '~/helpers/logging'
 
 /**
  * @param {LayoutProps}
@@ -20,6 +21,7 @@ export function Layout({
   header,
   isLoggedIn,
 }) {
+  useLogRerender('Layout')
   return (
     <div>
       <CartAside cart={cart} />
diff --git a/app/helpers/logging.js b/app/helpers/logging.js
new file mode 100644
index 0000000..2a41614
--- /dev/null
+++ b/app/helpers/logging.js
@@ -0,0 +1,40 @@
+import * as React from 'react'
+
+function getID() {
+  // return randnom alphanumeric string
+  return Math.random().toString(36).substring(2, 6)
+}
+
+function logRerender(
+  name,
+  renderCount,
+  ID,
+  mountOrUnmount,
+) {
+  const message = `${name} ${ID} ${mountOrUnmount} ${renderCount}`
+  console.log(message)
+  if (
+    typeof performance !== 'undefined' &&
+    typeof performance.measure !== 'undefined'
+  ) {
+    performance.measure(message, {
+      start: performance.now(),
+      duration: 20,
+    })
+  }
+}
+
+export function useLogRerender(name) {
+  const [ID] = React.useState(getID())
+  const renderCount = React.useRef(0)
+  renderCount.current = renderCount.current + 1
+  logRerender(name, renderCount.current, ID, 'render')
+  React.useEffect(() => {
+    logRerender(name, renderCount.current, ID, 'mount')
+    return () => {
+      logRerender(name, renderCount.current, ID, 'unmount')
+    }
+  }, [])
+
+  return renderCount
+}
diff --git a/app/routes/_index/route.jsx b/app/routes/_index/route.jsx
index e7af7b2..a60cc54 100644
--- a/app/routes/_index/route.jsx
+++ b/app/routes/_index/route.jsx
@@ -2,43 +2,10 @@ import React from 'react'
 
 import { Column } from '@h2/new/Layout'
 import Hero from './sections/hero'
+import { useLogRerender } from '~/helpers/logging'
 
 export default function Homepage() {
-  const renderCount = React.useRef(Math.random())
-  renderCount.current = renderCount.current + 1
-  console.log('Homepage render', renderCount.current)
-
-  if (
-    typeof performance !== 'undefined' &&
-    typeof performance.measure !== 'undefined'
-  ) {
-    performance.measure(
-      `Homepage route render ${renderCount.current}`,
-      {
-        start: performance.now(),
-        duration: 50,
-      },
-    )
-  }
-
-  React.useEffect(() => {
-    return function cleanup() {
-      // we are about to unmount!
-      console.log('Homepage unmount', renderCount.current)
-      if (
-        typeof performance !== 'undefined' &&
-        typeof performance.measure !== 'undefined'
-      ) {
-        performance.measure(
-          `Homepage route unmount ${renderCount.current}`,
-          {
-            start: performance.now(),
-            duration: 50,
-          },
-        )
-      }
-    }
-  }, [])
+  useLogRerender('Homepage')
 
   return (
     <Column>
diff --git a/app/routes/_index/sections/hero.jsx b/app/routes/_index/sections/hero.jsx
index 85e0f84..25f454e 100644
--- a/app/routes/_index/sections/hero.jsx
+++ b/app/routes/_index/sections/hero.jsx
@@ -1,41 +1,8 @@
 import * as React from 'react'
+import { useLogRerender } from '~/helpers/logging'
 
 export default function Hero() {
-  const renderCount = React.useRef(Math.random())
-  renderCount.current = renderCount.current + 1
-  console.log('Hero render', renderCount.current)
-
-  if (
-    typeof performance !== 'undefined' &&
-    typeof performance.measure !== 'undefined'
-  ) {
-    performance.measure(
-      `Hero render ${renderCount.current}`,
-      {
-        start: performance.now(),
-        duration: 50,
-      },
-    )
-  }
-
-  React.useEffect(() => {
-    return function cleanup() {
-      // we are about to unmount!
-      console.log('Hero unmount', renderCount.current)
-      if (
-        typeof performance !== 'undefined' &&
-        typeof performance.measure !== 'undefined'
-      ) {
-        performance.measure(
-          `Hero unmount ${renderCount.current}`,
-          {
-            start: performance.now(),
-            duration: 50,
-          },
-        )
-      }
-    }
-  }, [])
+  useLogRerender('Hero')
 
   return (
     <section className='w-full relative min-h-8 h-svh max-h-[64rem] bg-darkGray text-white'>
@@ -58,43 +25,7 @@ export default function Hero() {
 
 function Counter() {
   const [clickCount, setClickCount] = React.useState(0)
-  const renderCount = React.useRef(0)
-  renderCount.current += 1
-
-  console.log('Counter render', renderCount.current)
-
-  if (
-    typeof performance !== 'undefined' &&
-    typeof performance.measure !== 'undefined'
-  ) {
-    performance.measure(
-      `Counter render ${renderCount.current}`,
-      {
-        start: performance.now(),
-        duration: 50,
-      },
-    )
-  }
-
-  React.useEffect(() => {
-    return function cleanup() {
-      // we are about to unmount!
-      console.log('Counter unmount', renderCount.current)
-
-      if (
-        typeof performance !== 'undefined' &&
-        typeof performance.measure !== 'undefined'
-      ) {
-        performance.measure(
-          `Counter unmount ${renderCount.current}`,
-          {
-            start: performance.now(),
-            duration: 50,
-          },
-        )
-      }
-    }
-  }, [])
+  const renderCount = useLogRerender('Counter')
 
   return (
     <div style={{ contain: 'layout' }}>