better logging

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} />

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
+}

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>

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' }}>