fix: prevent infinite renders in CreateWorkspacePageView by replacing useEffect with useEffectEvent

aqandrew · aqandrew · commit 9398e0db568d · 2025-10-15T20:02:20.000Z
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -26,6 +26,7 @@ import { Stack } from "components/Stack/Stack";
 import { Switch } from "components/Switch/Switch";
 import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete";
 import { type FormikContextType, useFormik } from "formik";
+import { useEffectEvent } from "hooks/hookPolyfills";
 import type { ExternalAuthPollingState } from "hooks/useExternalAuth";
 import { ExternalLinkIcon } from "lucide-react";
 import { linkToTemplate, useLinks } from "modules/navigation";
@@ -162,7 +163,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 	]);
 	const [selectedPresetIndex, setSelectedPresetIndex] = useState(0);
 	// Build options and keep default label/value in sync
-	useEffect(() => {
+	useEffectEvent(() => {
 		const options = [
 			{ displayName: "None", value: "undefined", icon: "", description: "" },
 			...presets.map((preset) => ({
@@ -182,12 +183,12 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 			setSelectedPresetIndex(0); // Explicitly set to "None"
 			form.setFieldValue("template_version_preset_id", undefined);
 		}
-	}, [presets, form.setFieldValue]);
+	});
 
 	const [presetParameterNames, setPresetParameterNames] = useState<string[]>(
 		[],
 	);
-	useEffect(() => {
+	useEffectEvent(() => {
 		const selectedPresetOption = presetOptions[selectedPresetIndex];
 		let selectedPreset: TypesGen.Preset | undefined;
 		for (const preset of presets) {
@@ -217,13 +218,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 				value: presetParameter.Value,
 			});
 		}
-	}, [
-		presetOptions,
-		selectedPresetIndex,
-		presets,
-		parameters,
-		form.setFieldValue,
-	]);
+	});
 
 	return (
 		<Margins size="medium">
