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() {
{({ height, width }) => (
-
+
)}
@@ -111,6 +112,10 @@ const Container = styled("div")`
}
`;
+const MemoizedOptionsForm = memo(({ onCluster }) => (
+
+));
+
interface OptionsFormProps {
onCluster: (
opts: ClusteringOpts,
@@ -158,13 +163,13 @@ const OptionsForm: React.FC = ({ onCluster }) => {
return (
Parameters
-
+
{formik.isSubmitting && }
);
};
-const Form = memo(
+const MemoizedForm = memo(
({
values,
handleSubmit,