chore: enable react compiler oxlint rules

2026-10-22 12:16:52 +00:00 · 2026-07-14 10:23:32 +10:00
parent 3c97627102
commit 9a8b5bd841
31 changed files with 127 additions and 119 deletions
@@ -1,4 +1,4 @@
-import{n as e}from"./compiler-runtime.js";import{t}from"./useNavigate.js";import{F as n,Ln as r,Qt as i,Y as a,ct as o,en as s,fn as c,gn as l,ln as u,nn as d,on as f,pn as p,un as m}from"./index.js";import{t as h}from"./form-actions.js";import{t as g}from"./launch-template-data-fields.js";var _=e();function v(){let e=t(),v=o(),{control:y,handleSubmit:x,register:S,watch:C,formState:{errors:w,isSubmitting:T}}=l({resolver:p(n),defaultValues:{launchTemplateName:``,versionDescription:``,imageId:``,instanceType:``,securityGroupIds:[],userData:``}}),E=C();return(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(c,{to:`/ec2/describe-launch-templates`,children:`Back to launch templates`}),(0,_.jsx)(f,{title:`Create Launch Template`}),v.error&&(0,_.jsx)(u,{error:v.error,msg:`Failed to create launch template`}),(0,_.jsxs)(`form`,{className:`max-w-4xl space-y-6`,onSubmit:x(async t=>{let n=(await v.mutateAsync(t)).LaunchTemplate?.LaunchTemplateId;if(!n){e({to:`/ec2/describe-launch-templates`});return}e({to:`/ec2/describe-launch-templates/$id`,params:{id:n}})}),children:[(0,_.jsxs)(i,{children:[(0,_.jsx)(d,{children:(0,_.jsx)(`label`,{htmlFor:`launchTemplateName`,children:`Name`})}),(0,_.jsx)(r,{"aria-invalid":!!w.launchTemplateName,id:`launchTemplateName`,placeholder:`my-launch-template`,...S(`launchTemplateName`)}),(0,_.jsx)(s,{errors:[w.launchTemplateName]})]}),(0,_.jsxs)(i,{children:[(0,_.jsx)(d,{children:(0,_.jsx)(`label`,{htmlFor:`versionDescription`,children:`Version Description`})}),(0,_.jsx)(r,{id:`versionDescription`,placeholder:`Initial version`,...S(`versionDescription`)})]}),(0,_.jsx)(g,{control:y,errors:w,register:S}),(0,_.jsx)(m,{commands:b(E.launchTemplateName??``,E.versionDescription??``,a(E))}),(0,_.jsx)(h,{isPending:v.isPending,isSubmitting:T,onCancel:async()=>await e({to:`/ec2/describe-launch-templates`}),pendingLabel:`Creating…`,submitLabel:`Create Launch Template`})]})]})}function y(e){return`'${e.replaceAll(`'`,`'"'"'`)}'`}function b(e,t,n){let r=[{type:`bin`,value:`AWS_PROFILE=spinifex aws ec2 create-launch-template`},{type:`flag`,value:` \\
+import{n as e,t}from"./compiler-runtime.js";import{t as n}from"./useNavigate.js";import{F as r,Ln as i,Qt as a,Y as o,_n as s,ct as c,en as l,fn as ee,gn as te,ln as ne,nn as u,on as d,pn as f,un as p}from"./index.js";import{t as m}from"./form-actions.js";import{t as h}from"./launch-template-data-fields.js";var g=t(),_=e();function v(){let e=(0,g.c)(56),t=n(),v=c(),y;e[0]===Symbol.for(`react.memo_cache_sentinel`)?(y=f(r),e[0]=y):y=e[0];let x;e[1]===Symbol.for(`react.memo_cache_sentinel`)?(x={resolver:y,defaultValues:{launchTemplateName:``,versionDescription:``,imageId:``,instanceType:``,securityGroupIds:[],userData:``}},e[1]=x):x=e[1];let{control:S,handleSubmit:C,register:w,formState:T}=te(x),{errors:E,isSubmitting:D}=T,O;e[2]===S?O=e[3]:(O={control:S},e[2]=S,e[3]=O);let k=s(O),A;e[4]!==v||e[5]!==t?(A=async e=>{let n=(await v.mutateAsync(e)).LaunchTemplate?.LaunchTemplateId;if(!n){t({to:`/ec2/describe-launch-templates`});return}t({to:`/ec2/describe-launch-templates/$id`,params:{id:n}})},e[4]=v,e[5]=t,e[6]=A):A=e[6];let j=A,M,N;e[7]===Symbol.for(`react.memo_cache_sentinel`)?(M=(0,_.jsx)(ee,{to:`/ec2/describe-launch-templates`,children:`Back to launch templates`}),N=(0,_.jsx)(d,{title:`Create Launch Template`}),e[7]=M,e[8]=N):(M=e[7],N=e[8]);let P;e[9]===v.error?P=e[10]:(P=v.error&&(0,_.jsx)(ne,{error:v.error,msg:`Failed to create launch template`}),e[9]=v.error,e[10]=P);let F;e[11]!==C||e[12]!==j?(F=C(j),e[11]=C,e[12]=j,e[13]=F):F=e[13];let I;e[14]===Symbol.for(`react.memo_cache_sentinel`)?(I=(0,_.jsx)(u,{children:(0,_.jsx)(`label`,{htmlFor:`launchTemplateName`,children:`Name`})}),e[14]=I):I=e[14];let L=!!E.launchTemplateName,R;e[15]===w?R=e[16]:(R=w(`launchTemplateName`),e[15]=w,e[16]=R);let z;e[17]!==L||e[18]!==R?(z=(0,_.jsx)(i,{"aria-invalid":L,id:`launchTemplateName`,placeholder:`my-launch-template`,...R}),e[17]=L,e[18]=R,e[19]=z):z=e[19];let B;e[20]===E.launchTemplateName?B=e[21]:(B=(0,_.jsx)(l,{errors:[E.launchTemplateName]}),e[20]=E.launchTemplateName,e[21]=B);let V;e[22]!==z||e[23]!==B?(V=(0,_.jsxs)(a,{children:[I,z,B]}),e[22]=z,e[23]=B,e[24]=V):V=e[24];let H;e[25]===Symbol.for(`react.memo_cache_sentinel`)?(H=(0,_.jsx)(u,{children:(0,_.jsx)(`label`,{htmlFor:`versionDescription`,children:`Version Description`})}),e[25]=H):H=e[25];let U;e[26]===w?U=e[27]:(U=w(`versionDescription`),e[26]=w,e[27]=U);let W;e[28]===U?W=e[29]:(W=(0,_.jsxs)(a,{children:[H,(0,_.jsx)(i,{id:`versionDescription`,placeholder:`Initial version`,...U})]}),e[28]=U,e[29]=W);let G;e[30]!==S||e[31]!==E||e[32]!==w?(G=(0,_.jsx)(h,{control:S,errors:E,register:w}),e[30]=S,e[31]=E,e[32]=w,e[33]=G):G=e[33];let K=k.launchTemplateName??``,q=k.versionDescription??``,J;e[34]!==K||e[35]!==q||e[36]!==k?(J=b(K,q,o(k)),e[34]=K,e[35]=q,e[36]=k,e[37]=J):J=e[37];let Y;e[38]===J?Y=e[39]:(Y=(0,_.jsx)(p,{commands:J}),e[38]=J,e[39]=Y);let X;e[40]===t?X=e[41]:(X=async()=>await t({to:`/ec2/describe-launch-templates`}),e[40]=t,e[41]=X);let Z;e[42]!==v.isPending||e[43]!==D||e[44]!==X?(Z=(0,_.jsx)(m,{isPending:v.isPending,isSubmitting:D,onCancel:X,pendingLabel:`Creating…`,submitLabel:`Create Launch Template`}),e[42]=v.isPending,e[43]=D,e[44]=X,e[45]=Z):Z=e[45];let Q;e[46]!==V||e[47]!==W||e[48]!==G||e[49]!==Y||e[50]!==Z||e[51]!==F?(Q=(0,_.jsxs)(`form`,{className:`max-w-4xl space-y-6`,onSubmit:F,children:[V,W,G,Y,Z]}),e[46]=V,e[47]=W,e[48]=G,e[49]=Y,e[50]=Z,e[51]=F,e[52]=Q):Q=e[52];let $;return e[53]!==Q||e[54]!==P?($=(0,_.jsxs)(_.Fragment,{children:[M,N,P,Q]}),e[53]=Q,e[54]=P,e[55]=$):$=e[55],$}function y(e){return`'${e.replaceAll(`'`,`'"'"'`)}'`}function b(e,t,n){let r=[{type:`bin`,value:`AWS_PROFILE=spinifex aws ec2 create-launch-template`},{type:`flag`,value:` \\
  --launch-template-name`},{type:`value`,value:` ${e?y(e):`<name>`}`}];return t&&r.push({type:`flag`,value:` \\
  --version-description`},{type:`value`,value:` ${y(t)}`}),r.push({type:`flag`,value:` \\
  --launch-template-data`},{type:`value`,value:` ${y(JSON.stringify(n))}`}),[{label:`Create Launch Template`,parts:r}]}export{v as component};
@@ -25,7 +25,6 @@ export default defineConfig({
    "@tanstack/router/create-route-property-order": "error",
    "@tanstack/router/route-param-names": "error",
    "react/jsx-handler-names": "off",
-    "react/react-compiler": "off",
    "react/no-object-type-as-default-prop": "off",
    "eslint/complexity": "off",
    "eslint/func-style": [
@@ -1,5 +1,5 @@
 import type { Instance } from "@aws-sdk/client-ec2"
-import { useEffect, useState } from "react"
+import { useState } from "react"

 import {
  AlertDialog,
@@ -54,12 +54,15 @@ export function RegisterTargetsDialog({
  )
  const [error, setError] = useState<string | undefined>()

-  useEffect(() => {
+  // Clear the selection each time the dialog closes so it reopens fresh.
+  const [wasOpen, setWasOpen] = useState(open)
+  if (open !== wasOpen) {
+    setWasOpen(open)
    if (!open) {
      setSelections({})
      setError(undefined)
    }
-  }, [open])
+  }

  const toggle = (id: string) => {
    setSelections((prev) => {
@@ -302,7 +302,7 @@ function encodeUserData(text: string): string {
 // primary network interface (templates have no top-level SubnetId); security
 // groups attach to that interface, or at the top level when no subnet is set.
 export function buildLaunchTemplateData(
-  data: LaunchTemplateFormData,
+  data: Partial<LaunchTemplateFormData>,
 ): RequestLaunchTemplateData {
  const out: RequestLaunchTemplateData = {}
  if (data.imageId) {
@@ -4,7 +4,7 @@ import { useQuery, useSuspenseQuery } from "@tanstack/react-query"
 import { createFileRoute, useNavigate, useSearch } from "@tanstack/react-router"
 import { ChevronDown } from "lucide-react"
 import { useEffect } from "react"
-import { Controller, useForm } from "react-hook-form"
+import { Controller, useForm, useWatch } from "react-hook-form"

 import { BackLink } from "@/components/back-link"
 import {
@@ -198,7 +198,7 @@ export function CreateInstance() {
    },
  })

-  const selectedInstanceType = watch("instanceType")
+  const selectedInstanceType = useWatch({ control, name: "instanceType" })
  const maxCount = selectedInstanceType
    ? (instanceTypeCounts[selectedInstanceType] ?? 1)
    : 1
@@ -209,20 +209,23 @@ export function CreateInstance() {
  const selectedGpuMigProfile = selectedGpuDevice?.Name?.startsWith("MIG ")
    ? selectedGpuDevice.Name.slice("MIG ".length)
    : undefined
-  const selectedImageId = watch("imageId")
+  const selectedImageId = useWatch({ control, name: "imageId" })
  const selectedRoot = getRootMapping(
    images.find((img) => img.ImageId === selectedImageId),
  )

-  const selectedSubnetId = watch("subnetId")
-  const sgMode = watch("securityGroupMode")
-  const ruleSource = watch("ruleSource")
-  const selectedSgIds = watch("securityGroupIds") ?? []
+  const selectedSubnetId = useWatch({ control, name: "subnetId" })
+  const sgMode = useWatch({ control, name: "securityGroupMode" })
+  const ruleSource = useWatch({ control, name: "ruleSource" })
+  const selectedSgIds = useWatch({ control, name: "securityGroupIds" }) ?? []

  // Launch template: when one is selected the instance is launched from it and
  // the direct-config fields below are hidden — the template supplies them.
-  const selectedTemplateId = watch("launchTemplateId")
-  const selectedTemplateVersion = watch("launchTemplateVersion")
+  const selectedTemplateId = useWatch({ control, name: "launchTemplateId" })
+  const selectedTemplateVersion = useWatch({
+    control,
+    name: "launchTemplateVersion",
+  })
  const templateVersionsQuery = useQuery({
    ...ec2LaunchTemplateVersionsQueryOptions(selectedTemplateId ?? ""),
    enabled: !!selectedTemplateId,
@@ -1,7 +1,7 @@
 import type { RequestLaunchTemplateData } from "@aws-sdk/client-ec2"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { createFileRoute, useNavigate } from "@tanstack/react-router"
-import { useForm } from "react-hook-form"
+import { useForm, useWatch } from "react-hook-form"

 import { BackLink } from "@/components/back-link"
 import {
@@ -61,7 +61,6 @@ function CreateLaunchTemplate() {
    control,
    handleSubmit,
    register,
-    watch,
    formState: { errors, isSubmitting },
  } = useForm<LaunchTemplateFormData>({
    resolver: zodResolver(createLaunchTemplateSchema),
@@ -75,7 +74,7 @@ function CreateLaunchTemplate() {
    },
  })

-  const values = watch()
+  const values = useWatch({ control })

  const onSubmit = async (data: LaunchTemplateFormData) => {
    const result = await createMutation.mutateAsync(data)
@@ -4,7 +4,7 @@ import { useSuspenseQuery } from "@tanstack/react-query"
 import { useNavigate } from "@tanstack/react-router"
 import { Plus, Trash2 } from "lucide-react"
 import { useState } from "react"
-import { Controller, useForm } from "react-hook-form"
+import { Controller, useForm, useWatch } from "react-hook-form"

 import { BackLink } from "@/components/back-link"
 import {
@@ -180,13 +180,13 @@ export function CreateLoadBalancerPage() {
    formState: { errors, isSubmitting },
  } = lbForm

-  const selectedVpc = watch("vpcId")
-  const selectedSubnets = watch("subnetIds")
-  const selectedSgs = watch("securityGroupIds")
-  const lbType = watch("type")
-  const listenerProtocol = watch("listener.protocol")
-  const tgMode = watch("listener.targetGroupMode")
-  const tags = watch("tags")
+  const selectedVpc = useWatch({ control, name: "vpcId" })
+  const selectedSubnets = useWatch({ control, name: "subnetIds" })
+  const selectedSgs = useWatch({ control, name: "securityGroupIds" })
+  const lbType = useWatch({ control, name: "type" })
+  const listenerProtocol = useWatch({ control, name: "listener.protocol" })
+  const tgMode = useWatch({ control, name: "listener.targetGroupMode" })
+  const tags = useWatch({ control, name: "tags" })

  const isNlb = lbType === "network"
  const isSecure = isSecureProtocol(listenerProtocol)
@@ -4,7 +4,7 @@ import { useSuspenseQuery } from "@tanstack/react-query"
 import { createFileRoute, Link, useNavigate } from "@tanstack/react-router"
 import { Plus, Trash2, X } from "lucide-react"
 import { useState } from "react"
-import { Controller, useForm } from "react-hook-form"
+import { Controller, useForm, useWatch } from "react-hook-form"

 import { BackLink } from "@/components/back-link"
 import { DeleteConfirmationDialog } from "@/components/delete-confirmation-dialog"
@@ -115,7 +115,6 @@ function AddRuleDialog({
    handleSubmit,
    register,
    reset,
-    watch,
    formState: { errors },
  } = useForm<SecurityGroupRuleFormData>({
    resolver: zodResolver(securityGroupRuleSchema),
@@ -127,7 +126,7 @@ function AddRuleDialog({
    },
  })

-  const selectedProtocol = watch("ipProtocol")
+  const selectedProtocol = useWatch({ control, name: "ipProtocol" })
  const portsDisabled = selectedProtocol === "-1" || selectedProtocol === "icmp"

  const onSubmit = async (data: SecurityGroupRuleFormData) => {
@@ -1,7 +1,7 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import { createFileRoute, useNavigate } from "@tanstack/react-router"
 import { useState } from "react"
-import { Controller, useForm } from "react-hook-form"
+import { Controller, useForm, useWatch } from "react-hook-form"

 import { BackLink } from "@/components/back-link"
 import {
@@ -80,10 +80,10 @@ function CreateVpc() {
    formState: { errors, isSubmitting },
  } = form

-  const mode = watch("mode")
-  const cidrBlock = watch("cidrBlock")
-  const publicSubnetCount = watch("publicSubnetCount")
-  const privateSubnetCount = watch("privateSubnetCount")
+  const mode = useWatch({ control, name: "mode" })
+  const cidrBlock = useWatch({ control, name: "cidrBlock" })
+  const publicSubnetCount = useWatch({ control, name: "publicSubnetCount" })
+  const privateSubnetCount = useWatch({ control, name: "privateSubnetCount" })

  // Compute preview subnet CIDRs
  const subnetCidrs = calculateSubnetCidrs(
@@ -1,6 +1,6 @@
 import type { LifecyclePolicyPreviewResult } from "@aws-sdk/client-ecr"
 import { useSuspenseQuery } from "@tanstack/react-query"
-import { useEffect, useState } from "react"
+import { useState } from "react"

 import { Button } from "@/components/ui/button"
 import { JsonEditor } from "@/components/ui/json-editor"
@@ -46,9 +46,11 @@ export function LifecyclePolicyEditor({

  // Re-seed the editor when the stored policy changes (save/delete invalidates
  // the query), so the textarea tracks the server document.
-  useEffect(() => {
+  const [seededPolicy, setSeededPolicy] = useState(policyText)
+  if (policyText !== seededPolicy) {
+    setSeededPolicy(policyText)
    setDraft(policyText ?? "")
-  }, [policyText])
+  }

  async function handleSave() {
    try {
@@ -1,5 +1,5 @@
 import { useSuspenseQuery } from "@tanstack/react-query"
-import { useEffect, useState } from "react"
+import { useState } from "react"

 import { Button } from "@/components/ui/button"
 import { JsonEditor } from "@/components/ui/json-editor"
@@ -26,9 +26,11 @@ export function RepositoryPolicyEditor({

  // Re-seed the editor when the stored policy changes (save/delete invalidates
  // the query), so the textarea tracks the server document.
-  useEffect(() => {
+  const [seededPolicy, setSeededPolicy] = useState(policyText)
+  if (policyText !== seededPolicy) {
+    setSeededPolicy(policyText)
    setDraft(policyText ?? "")
-  }, [policyText])
+  }

  async function handleSave() {
    try {
@@ -1,7 +1,7 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useQuery, useSuspenseQuery } from "@tanstack/react-query"
 import { useNavigate } from "@tanstack/react-router"
-import { Controller, useForm } from "react-hook-form"
+import { Controller, useForm, useWatch } from "react-hook-form"

 import { BackLink } from "@/components/back-link"
 import { ErrorBanner } from "@/components/error-banner"
@@ -49,7 +49,6 @@ export function CreateServicePage({ cluster }: { cluster: string }) {
    control,
    handleSubmit,
    register: field,
-    watch,
    setValue,
    getValues,
    formState: { errors, isSubmitting },
@@ -69,14 +68,14 @@ export function CreateServicePage({ cluster }: { cluster: string }) {
    },
  })

-  const selectedTaskDef = watch("taskDefinition")
+  const selectedTaskDef = useWatch({ control, name: "taskDefinition" })
  const { data: describedTaskDef } = useQuery(
    ecsTaskDefinitionQueryOptions(selectedTaskDef),
  )
  const awsvpc = describedTaskDef?.networkMode === "awsvpc"

-  const selectedSubnets = watch("subnets")
-  const selectedSgs = watch("securityGroups")
+  const selectedSubnets = useWatch({ control, name: "subnets" })
+  const selectedSgs = useWatch({ control, name: "securityGroups" })
  const toggle = (name: "subnets" | "securityGroups", id: string) => {
    const current = getValues(name)
    setValue(
@@ -1,7 +1,7 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useQuery, useSuspenseQuery } from "@tanstack/react-query"
 import { useNavigate } from "@tanstack/react-router"
-import { Controller, useForm } from "react-hook-form"
+import { Controller, useForm, useWatch } from "react-hook-form"

 import { BackLink } from "@/components/back-link"
 import { ErrorBanner } from "@/components/error-banner"
@@ -47,7 +47,6 @@ export function RunTaskPage({ cluster }: { cluster: string }) {
    control,
    handleSubmit,
    register: field,
-    watch,
    setValue,
    getValues,
    formState: { errors, isSubmitting },
@@ -63,14 +62,14 @@ export function RunTaskPage({ cluster }: { cluster: string }) {
    },
  })

-  const selectedTaskDef = watch("taskDefinition")
+  const selectedTaskDef = useWatch({ control, name: "taskDefinition" })
  const { data: describedTaskDef } = useQuery(
    ecsTaskDefinitionQueryOptions(selectedTaskDef),
  )
  const awsvpc = describedTaskDef?.networkMode === "awsvpc"

-  const selectedSubnets = watch("subnets")
-  const selectedSgs = watch("securityGroups")
+  const selectedSubnets = useWatch({ control, name: "subnets" })
+  const selectedSgs = useWatch({ control, name: "securityGroups" })
  const toggle = (name: "subnets" | "securityGroups", id: string) => {
    const current = getValues(name)
    setValue(
@@ -2,8 +2,8 @@ import type { AddonInfo } from "@aws-sdk/client-eks"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useQuery, useSuspenseQuery } from "@tanstack/react-query"
 import { ArrowUpCircle, Trash2 } from "lucide-react"
-import { useEffect, useState } from "react"
-import { Controller, useForm } from "react-hook-form"
+import { useState } from "react"
+import { Controller, useForm, useWatch } from "react-hook-form"

 import { DeleteConfirmationDialog } from "@/components/delete-confirmation-dialog"
 import { DetailCard } from "@/components/detail-card"
@@ -66,7 +66,6 @@ function AddAddonDialog({
    register,
    reset,
    setValue,
-    watch,
  } = useForm<CreateAddonFormValues>({
    resolver: zodResolver(createAddonSchema),
    defaultValues: {
@@ -77,8 +76,8 @@ function AddAddonDialog({
    },
  })

-  const addonName = watch("addonName")
-  const addonVersion = watch("addonVersion")
+  const addonName = useWatch({ control, name: "addonName" })
+  const addonVersion = useWatch({ control, name: "addonVersion" })
  const selectedAddon = catalog.find((a) => a.addonName === addonName)
  const versions = selectedAddon?.addonVersions ?? []
  const selectedVersion = versions.find((v) => v.addonVersion === addonVersion)
@@ -241,19 +240,17 @@ function UpdateAddonDialog({
  const [config, setConfig] = useState(current.configurationValues ?? "")
  const [error, setError] = useState<string | undefined>()

-  useEffect(() => {
+  // Seed the fields from the current add-on config each time the dialog opens.
+  const [wasOpen, setWasOpen] = useState(open)
+  if (open !== wasOpen) {
+    setWasOpen(open)
    if (open) {
      setVersion(current.addonVersion ?? "")
      setRole(current.serviceAccountRoleArn ?? "")
      setConfig(current.configurationValues ?? "")
      setError(undefined)
    }
-  }, [
-    open,
-    current.addonVersion,
-    current.serviceAccountRoleArn,
-    current.configurationValues,
-  ])
+  }

  const handleConfirm = () => {
    const result = addonConfigurationSchema.safeParse(config)
@@ -3,7 +3,7 @@ import { zodResolver } from "@hookform/resolvers/zod"
 import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query"
 import { useNavigate } from "@tanstack/react-router"
 import { useState } from "react"
-import { Controller, useForm } from "react-hook-form"
+import { Controller, useForm, useWatch } from "react-hook-form"

 import { BackLink } from "@/components/back-link"
 import { ErrorBanner } from "@/components/error-banner"
@@ -82,7 +82,6 @@ export function CreateClusterPage() {
    handleSubmit,
    register,
    setValue,
-    watch,
  } = useForm<CreateClusterFormData>({
    resolver: zodResolver(createClusterSchema),
    defaultValues: {
@@ -98,10 +97,10 @@ export function CreateClusterPage() {
    },
  })

-  const selectedVpc = watch("vpcId")
-  const selectedSubnets = watch("subnetIds")
-  const publicAccess = watch("endpointPublicAccess")
-  const publicCidrs = watch("publicAccessCidrs")
+  const selectedVpc = useWatch({ control, name: "vpcId" })
+  const selectedSubnets = useWatch({ control, name: "subnetIds" })
+  const publicAccess = useWatch({ control, name: "endpointPublicAccess" })
+  const publicCidrs = useWatch({ control, name: "publicAccessCidrs" })

  const vpcSubnets = allSubnets.filter((s) => s.VpcId === selectedVpc)

@@ -135,7 +134,7 @@ export function CreateClusterPage() {
      { shouldValidate: true },
    )

-  const clusterName = watch("name")
+  const clusterName = useWatch({ control, name: "name" })

  const handleRoleCreated = async (roleArn: string) => {
    await queryClient.invalidateQueries({
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react"
+import { useState } from "react"

 import {
  AlertDialog,
@@ -42,12 +42,15 @@ export function CreateClusterRoleDialog({
  const [roleName, setRoleName] = useState(defaultRoleName(clusterName))
  const [formError, setFormError] = useState<string | null>(null)

-  useEffect(() => {
+  // Seed the role name from the cluster name each time the dialog opens.
+  const [wasOpen, setWasOpen] = useState(open)
+  if (open !== wasOpen) {
+    setWasOpen(open)
    if (open) {
      setRoleName(defaultRoleName(clusterName))
      setFormError(null)
    }
-  }, [open, clusterName])
+  }

  const isPending = createRole.isPending || attachPolicy.isPending

@@ -2,8 +2,8 @@ import type { InstanceTypeInfo } from "@aws-sdk/client-ec2"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useQuery, useSuspenseQuery } from "@tanstack/react-query"
 import { ArrowUpCircle, SlidersHorizontal, Trash2 } from "lucide-react"
-import { useEffect, useState } from "react"
-import { Controller, useForm } from "react-hook-form"
+import { useState } from "react"
+import { Controller, useForm, useWatch } from "react-hook-form"

 import { DeleteConfirmationDialog } from "@/components/delete-confirmation-dialog"
 import { DetailCard } from "@/components/detail-card"
@@ -90,14 +90,17 @@ function ScaleNodegroupDialog({
  const [maxSize, setMaxSize] = useState(current.maxSize ?? 0)
  const [error, setError] = useState<string | undefined>()

-  useEffect(() => {
+  // Seed the sizes from the current nodegroup each time the dialog opens.
+  const [wasOpen, setWasOpen] = useState(open)
+  if (open !== wasOpen) {
+    setWasOpen(open)
    if (open) {
      setMinSize(current.minSize ?? 0)
      setDesiredSize(current.desiredSize ?? 0)
      setMaxSize(current.maxSize ?? 0)
      setError(undefined)
    }
-  }, [open, current.minSize, current.desiredSize, current.maxSize])
+  }

  const handleConfirm = () => {
    if (!(minSize <= desiredSize && desiredSize <= maxSize)) {
@@ -312,7 +315,6 @@ function AddNodegroupDialog({
    register,
    reset,
    setValue,
-    watch,
  } = useForm<CreateNodegroupFormValues>({
    resolver: zodResolver(createNodegroupSchema),
    defaultValues: {
@@ -329,8 +331,8 @@ function AddNodegroupDialog({
    },
  })

-  const selectedSubnets = watch("subnetIds")
-  const selectedInstanceType = watch("instanceTypes")
+  const selectedSubnets = useWatch({ control, name: "subnetIds" })
+  const selectedInstanceType = useWatch({ control, name: "instanceTypes" })
  const selectedIsGpu = isGpuNodegroup(selectedInstanceType, instanceTypes)

  const toggleSubnet = (subnetId: string) => {
@@ -1,5 +1,5 @@
 import { useQuery, useSuspenseQuery } from "@tanstack/react-query"
-import { useEffect, useState } from "react"
+import { useState } from "react"

 import { DeleteConfirmationDialog } from "@/components/delete-confirmation-dialog"
 import { DetailCard } from "@/components/detail-card"
@@ -316,13 +316,15 @@ function EditInlinePolicyForm({
  onClose,
 }: EditInlinePolicyFormProps) {
  const { data: savedDocument, isLoading, error } = useQuery(queryOptions)
-  const [draft, setDraft] = useState("")
+  const [draft, setDraft] = useState(savedDocument ?? "")

  // Re-seed from the stored document (save invalidates the query) so the
  // textarea tracks the server copy, mirroring the ECR policy editor.
-  useEffect(() => {
+  const [seededDocument, setSeededDocument] = useState(savedDocument)
+  if (savedDocument !== seededDocument) {
+    setSeededDocument(savedDocument)
    setDraft(savedDocument ?? "")
-  }, [savedDocument])
+  }

  const trimmed = draft.trim()
  const invalidJson = trimmed.length > 0 && !isValidJson(draft)
@@ -63,7 +63,7 @@ function LoginPage() {
      setSessionCredentials(session)
      // Drop cached clients so they rebuild with the new session creds.
      clearClients()
-      window.location.href = "/"
+      window.location.assign("/")
    } catch {
      setAuthError(
        "Invalid credentials. Please check your Access Key ID and Secret Access Key.",