Fix infinite re-render loop in MacroStageSelect

albireox · Dec 15, 2022 · 0718a36 · 0718a36
1 parent 1b3058a
commit 0718a36
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 17 deletions.
diff --git a/src/renderer/HAL/Components/MacroStageSelect.tsx b/src/renderer/HAL/Components/MacroStageSelect.tsx
@@ -34,22 +34,25 @@ export function MacroStageSelect({
   const [selectedStages, setSelectedStages] = React.useState<string[]>([]);
   const [autoSelected, setAutoSelected] = React.useState(autoMode);
 
-  const handleChange = (e: SelectChangeEvent<typeof selectedStages>) => {
-    const selected = e.target.value as string[];
-    if (selected.includes('auto')) {
-      setSelectedStages([]);
-      setAutoSelected(true);
-      onStagesSelected && onStagesSelected(['auto']);
-    } else if (selected.includes('all')) {
-      setSelectedStages([]);
-      setAutoSelected(false);
-      onStagesSelected && onStagesSelected([]);
-    } else {
-      setSelectedStages(selected);
-      setAutoSelected(false);
-      onStagesSelected && onStagesSelected(selected);
-    }
-  };
+  const handleChange = React.useCallback(
+    (e: SelectChangeEvent<typeof selectedStages>) => {
+      const selected = e.target.value as string[];
+      if (selected.includes('auto')) {
+        setSelectedStages([]);
+        setAutoSelected(true);
+        onStagesSelected && onStagesSelected(['auto']);
+      } else if (selected.includes('all')) {
+        setSelectedStages([]);
+        setAutoSelected(false);
+        onStagesSelected && onStagesSelected([]);
+      } else {
+        setSelectedStages(selected);
+        setAutoSelected(false);
+        onStagesSelected && onStagesSelected(selected);
+      }
+    },
+    []
+  );
 
   React.useEffect(() => {
     // Emit the stages on load.

diff --git a/src/renderer/HAL/Expose.tsx b/src/renderer/HAL/Expose.tsx
@@ -302,7 +302,10 @@ export default function Expose() {
             stages={macros.expose.stages}
             maxWidth={200}
             minWidth={100}
-            onStagesSelected={(stgs) => setStages(stgs)}
+            onStagesSelected={React.useCallback(
+              (stgs: string[]) => setStages(stgs),
+              []
+            )}
           />
           <Stack
             alignItems='center'