fix(FR-2815): break ResourceAllocationFormItems render loop with idempotent guards

Resolves #7248(FR-2815)

User reported the 'use memo' directive alone did not stop the loop on rc2.
Deeper analysis shows the loop is closed by `setFieldsValue` calls that
repeatedly write the same value, which still notifies subscribers (including
the page-level `Form.useWatch('resource')` added in FR-2324) and triggers a
parent re-render, forcing the child to re-render and re-fire the effect.

Fixes:

1. Wrap `acceleratorSlotsInRG = _.omitBy(...)` in an explicit `useMemo` with
   `[resourceSlotsInRG]` deps, so its identity is stable across renders even
   if the React Compiler does not memoize it. This stabilizes the downstream
   `supportedAcceleratorTypesInRGByImage` useMemo.

2. Add idempotent guards to the `useEffect` at line 226 so `setFieldsValue`
   is only called when the target value actually differs:
   - Skip `allocationPreset: 'auto-select'` write when it is already
     'auto-select' or 'custom'.
   - Skip `resource.accelerator: 0` write when it is already `0`.

3. Add an idempotent early-return to `ensureValidAcceleratorType` when the
   target accelerator type equals the current one. This helper is called
   unconditionally from another effect at line 460-515; without the guard
   it pump-primes the same loop.

Kept the `'use memo'` directives from the prior commit on this branch as
they align with the project-wide React 19.2 + React Compiler convention
(`.claude/rules/react-compiler-memoization.md`).

Author: ironAiken2

react/src/components/SessionFormItems/ResourceAllocationFormItems.tsx

@@ -104,6 +104,7 @@ const ResourceAllocationFormItems: React.FC<
   hideClusterFormItems = false,
   extraAcceleratorRules,
 }) => {
+  'use memo';
   const form = Form.useFormInstance<MergedResourceAllocationFormValue>();
   const { t } = useTranslation();
   const { token } = theme.useToken();
@@ -182,12 +183,21 @@ const ResourceAllocationFormItems: React.FC<
   );
 
   // When undefined, it means that the resourceSlots are not loaded yet.
-  const acceleratorSlotsInRG = resourceSlotsInRG
-    ? _.omitBy(resourceSlotsInRG, (_value, key) => {
-        if (['cpu', 'mem', 'shmem'].includes(key)) return true;
-        return false;
-      })
-    : undefined;
+  // Memoize so the identity is stable when `resourceSlotsInRG` is unchanged —
+  // otherwise the downstream `supportedAcceleratorTypesInRGByImage` useMemo
+  // is invalidated every render, which (combined with the page-level
+  // `Form.useWatch('resource')` added in FR-2324) closes a render-loop
+  // circuit on backends where `length === 0` is reached.
+  const acceleratorSlotsInRG = useMemo(
+    () =>
+      resourceSlotsInRG
+        ? _.omitBy(resourceSlotsInRG, (_value, key) => {
+            if (['cpu', 'mem', 'shmem'].includes(key)) return true;
+            return false;
+          })
+        : undefined,
+    [resourceSlotsInRG],
+  );
 
   // When undefined, it means that the image is not determined yet.
   const currentImageAcceleratorLimits = useMemo(
@@ -223,15 +233,25 @@ const ResourceAllocationFormItems: React.FC<
   }, [currentImage, acceleratorSlotsInRG, currentEnvironmentManual]);
 
   useEffect(() => {
+    // Idempotent guards: only call setFieldsValue when the target value
+    // actually differs. Without these guards, the page-level
+    // `Form.useWatch('resource')` added in FR-2324 propagates each
+    // setFieldsValue back up to a parent re-render, which triggers a
+    // child re-render, which re-fires this effect — an infinite loop on
+    // backends where `length === 0` (FR-2815).
     if (
       !currentResourceValue &&
-      form.getFieldValue('allocationPreset') !== 'custom'
+      form.getFieldValue('allocationPreset') !== 'custom' &&
+      form.getFieldValue('allocationPreset') !== 'auto-select'
     ) {
       form.setFieldsValue({
         allocationPreset: 'auto-select',
       });
     }
-    if (supportedAcceleratorTypesInRGByImage?.length === 0) {
+    if (
+      supportedAcceleratorTypesInRGByImage?.length === 0 &&
+      form.getFieldValue(['resource', 'accelerator']) !== 0
+    ) {
       form.setFieldsValue({
         resource: {
           accelerator: 0,
@@ -278,9 +298,17 @@ const ResourceAllocationFormItems: React.FC<
       ? currentAcceleratorType
       : _.first(_.keys(acceleratorSlotsInRG));
 
+    const targetAcceleratorType = nextAcceleratorType || currentAcceleratorType;
+    // Idempotent guard: skip setFieldsValue when value is unchanged so this
+    // helper does not pump-prime a render loop when called from effects
+    // whose deps re-fire each render (FR-2815).
+    if (targetAcceleratorType === currentAcceleratorType) {
+      return;
+    }
+
     form.setFieldsValue({
       resource: {
-        acceleratorType: nextAcceleratorType || currentAcceleratorType,
+        acceleratorType: targetAcceleratorType,
       },
     });
   });

react/src/hooks/useResourceLimitAndRemaining.tsx

@@ -116,6 +116,7 @@ export const useResourceLimitAndRemaining = ({
   ignorePerContainerConfig = false,
   fetchKey,
 }: Props) => {
+  'use memo';
   const baiClient = useSuspendedBackendaiClient();
   const [resourceSlots] = useResourceSlots();
   const acceleratorSlots = _.omit(resourceSlots, ['cpu', 'mem', 'shmem']);