From 631fd7c956190661024243e412897bbbfad48e64 Mon Sep 17 00:00:00 2001
From: Oliver Walters <oliver.henry.walters@gmail.com>
Date: Sat, 27 Jun 2026 05:08:04 +0000
Subject: [PATCH] Add debug function for finding why a component re-rendered

---
 src/frontend/src/functions/debug.tsx | 32 ++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 src/frontend/src/functions/debug.tsx

diff --git a/src/frontend/src/functions/debug.tsx b/src/frontend/src/functions/debug.tsx
new file mode 100644
index 0000000000..ed172ed076
--- /dev/null
+++ b/src/frontend/src/functions/debug.tsx
@@ -0,0 +1,32 @@
+/** Various debugging helper functions for development */
+
+import { useEffect, useRef } from 'react';
+
+/**
+ * A custom hook that logs the previous and current props of a component whenever it updates.
+ */
+export function useWhyDidYouUpdate(name: string, props: any) {
+  const previousProps = useRef({});
+
+  useEffect(() => {
+    if (previousProps.current) {
+      const allKeys = Object.keys({ ...previousProps.current, ...props });
+      const changedProps: any = {};
+
+      allKeys.forEach((key) => {
+        if ((previousProps as any).current[key] !== props[key]) {
+          (changedProps as any)[key] = {
+            from: (previousProps as any).current[key],
+            to: props[key]
+          };
+        }
+      });
+
+      if (Object.keys(changedProps).length > 0) {
+        console.log(`[${name}] Changed props:`, changedProps);
+      }
+    }
+
+    previousProps.current = props;
+  });
+}