From 6fabb397888b8fa851dc1c7a6af42b9fac118bf0 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Mon, 2 Sep 2024 20:12:39 +0530
Subject: [PATCH] Memoize options form

Doesn't prevent it from getting recreated though
---
 web/apps/photos/src/pages/cluster-debug.tsx | 29 ++++++++++++---------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/web/apps/photos/src/pages/cluster-debug.tsx b/web/apps/photos/src/pages/cluster-debug.tsx
index dfbd01cf96..5376b287a9 100644
--- a/web/apps/photos/src/pages/cluster-debug.tsx
+++ b/web/apps/photos/src/pages/cluster-debug.tsx
@@ -34,6 +34,7 @@ import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import React, {
     memo,
+    useCallback,
     useContext,
     useEffect,
     useMemo,
@@ -55,15 +56,15 @@ export default function ClusterDebug() {
         ClusterDebugPageContents | undefined
     >();
 
-    const cluster = async (
-        opts: ClusteringOpts,
-        onProgress: OnClusteringProgress,
-    ) => {
-        setClusterRes(undefined);
-        startLoading();
-        setClusterRes(await wipClusterDebugPageContents(opts, onProgress));
-        finishLoading();
-    };
+    const cluster = useCallback(
+        async (opts: ClusteringOpts, onProgress: OnClusteringProgress) => {
+            setClusterRes(undefined);
+            startLoading();
+            setClusterRes(await wipClusterDebugPageContents(opts, onProgress));
+            finishLoading();
+        },
+        [startLoading, finishLoading],
+    );
 
     useEffect(() => showNavBar(true), []);
 
@@ -73,7 +74,7 @@ export default function ClusterDebug() {
                 <AutoSizer>
                     {({ height, width }) => (
                         <ClusterList {...{ width, height, clusterRes }}>
-                            <OptionsForm onCluster={cluster} />
+                            <MemoizedOptionsForm onCluster={cluster} />
                         </ClusterList>
                     )}
                 </AutoSizer>
@@ -111,6 +112,10 @@ const Container = styled("div")`
     }
 `;
 
+const MemoizedOptionsForm = memo<OptionsFormProps>(({ onCluster }) => (
+    <OptionsForm {...{ onCluster }} />
+));
+
 interface OptionsFormProps {
     onCluster: (
         opts: ClusteringOpts,
@@ -158,13 +163,13 @@ const OptionsForm: React.FC<OptionsFormProps> = ({ onCluster }) => {
     return (
         <Stack>
             <Typography paddingInline={1}>Parameters</Typography>
-            <Form {...formik} />
+            <MemoizedForm {...formik} />
             {formik.isSubmitting && <Loader {...progress} />}
         </Stack>
     );
 };
 
-const Form = memo(
+const MemoizedForm = memo(
     ({
         values,
         handleSubmit,