Remove debug hook.

pages/index.tsx

@@ -3,13 +3,10 @@ import * as React from 'react';
 import { AppChat } from '../src/apps/chat/AppChat';
 
 import { withNextJSPerPageLayout } from '~/common/layout/withLayout';
-import { useDebugHook } from '~/common/components/useDebugHook';
 
 
 export default withNextJSPerPageLayout({ type: 'optima' }, () => {
 
-  useDebugHook('IndexPage');
-
   // TODO: This Index page will point to the Dashboard (or a landing page)
   // For now it offers the chat experience, but this will change. #299
 

src/common/components/useDebugHook.ts

@@ -1,34 +1,47 @@
 import * as React from 'react';
 
-let instanceCounter = 0;
-
-function getRandom1000() {
-  const number = Math.round(Math.random() * 1000);
-  console.log('~random', number);
-  return number;
-}
-
-function increment() {
-  const number = instanceCounter++;
-  console.log('+increment', number);
-  return number;
-}
 
+// noinspection JSUnusedGlobalSymbols
+/**
+ * Useful for debugging React hooks.
+ * - will show a stable unique Id, consistent during the lifetime of the component
+ * - will show how many times the component has been rendered
+ *   - note: increment is a bit misleading, as it's incremented globally for all components across all renders
+ *   - although it's assigned to useRef, useRef will only remember the first value assigned to it
+ */
 export const useDebugHook = (app: string) => {
-  // test behavior of React.useState - note the function syntax, so we don't call the initializer on every render
-  const [test, setTest] = React.useState<number>(() => getRandom1000());
-  // test behavior of React.useRef with instance counter
-  const testRef = React.useRef<number>(increment());
 
-  console.log(app, 'render', test, testRef.current);
+  // test behavior of React.useState - note the function syntax, so we don't call the initializer on every render
+  const [hookId, setTest] = React.useState<number>(() => _getRandom1000());
+
+  // test behavior of React.useRef with instance counter
+  const testRef = React.useRef<number>(_increment(app));
+
+  console.log(app, 'render', hookId, testRef.current);
 
   React.useEffect(() => {
-    console.log(app, 'effect', test, testRef.current);
+    console.log(app, 'effect', hookId, testRef.current);
     return () => {
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      console.log(app, 'cleanup', test, testRef?.current);
+      console.log(app, 'cleanup', hookId, testRef?.current);
     };
-  }, [app, test]);
+  }, [app, hookId]);
+
+  return { test: hookId, setTest };
+};
+
+
+let debugGlobalIncrement = 0;
+
+function _increment(app: string) {
+  const number = ++debugGlobalIncrement;
+  console.log(`+increment: ${number} (${app})`);
+  return number;
+}
+
+function _getRandom1000() {
+  const number = Math.round(Math.random() * 1000);
+  console.log(' ~random', number);
+  return number;
+}
 
-  return { test, setTest };
-};