first commit

calcom/packages/debugging/components/RenderCounter.tsx

@@ -0,0 +1,17 @@
+import { useRef } from "react";
+
+/**
+ * Updates in document the number of times a component has been rendered. Helps in 2 ways. Using it doesn't cause any additional renders.
+ * - Did the component render when it shouldn't have?
+ * - Did the component reset its state when it shouldn't have?
+ */
+export const RenderCounter = ({ label }: { label: string }) => {
+  const counterRef = useRef(0);
+  counterRef.current++;
+  return (
+    <span>
+      <span>{label}:</span>
+      <span>{counterRef.current} </span>
+    </span>
+  );
+};

calcom/packages/debugging/index.tsx

@@ -0,0 +1 @@
+export { RenderCounter } from "./components/RenderCounter";

calcom/packages/debugging/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@calcom/debugging",
+  "description": "Debugging utilities",
+  "private": true,
+  "version": "1.0.0",
+  "main": "./index.ts"
+}

calcom/packages/debugging/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "@calcom/tsconfig/react-library.json",
+  "compilerOptions": {
+    "resolveJsonModule": true
+  },
+  "include": [
+    "../../apps/web/next-env.d.ts",
+    "../types/*.d.ts",
+    "../types/next-auth.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": ["dist", "build", "node_modules"]
+}