From 503a0b5b9ab988f04bb8ab1431db6b70f8dc51a4 Mon Sep 17 00:00:00 2001
From: robbond <rob@rdbsolutions.co.uk>
Date: Tue, 7 Apr 2026 12:34:36 +0100
Subject: [PATCH] Fix render-phase update in RenderSubFields

---
 components/elements/fields/renderSubFields.js |  8 ++++--
 memory-bank/change-log.md                     | 26 +++++++++++++++++++
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/components/elements/fields/renderSubFields.js b/components/elements/fields/renderSubFields.js
index 5e5665d9..d6d087f1 100644
--- a/components/elements/fields/renderSubFields.js
+++ b/components/elements/fields/renderSubFields.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Field } from "redux-form";
 import useTranslation from "next-translate/useTranslation";
 import { RenderTextfield } from "./renderTextfield";
@@ -45,7 +45,11 @@ export const RenderSubFields = ({
         return errors;
     };
 
-    fields.length == 0 && fields.push({});
+    useEffect(() => {
+        if (fields.length === 0) {
+            fields.push({});
+        }
+    }, [fields, fields.length]);
 
     return (
         <ul className="subFieldList">
diff --git a/memory-bank/change-log.md b/memory-bank/change-log.md
index 0a94ddb4..df628206 100644
--- a/memory-bank/change-log.md
+++ b/memory-bank/change-log.md
@@ -3447,3 +3447,29 @@ Validation:
 Follow-ups:
 
 - Continue bounded Phase 2 slices; when touching field components, prefer top-level computed hook-backed values reused across conditional branches.
+
+---
+
+### CL-096: 22500 `RenderSubFields` render-phase update warning hotfix
+
+date: 2026-04-07
+author: Cline
+scope: `components/elements/fields/renderSubFields.js`
+type: change
+rationale: Fix React warning about updating parent-connected state during `RenderSubFields` render.
+impact: No intended behavior change; initial empty FieldArray row initialization moved out of render phase to effect phase to satisfy React rendering constraints.
+status: completed
+
+Summary:
+
+- Root cause: `fields.length == 0 && fields.push({})` executed inside render, triggering state updates while rendering `RenderSubFields`.
+- Fix: moved initial row insertion into `useEffect`, guarded by `fields.length === 0`.
+- Preserved existing UX intent: ensure at least one subfield row appears when array starts empty.
+
+Validation:
+
+- `npx eslint components/elements/fields/renderSubFields.js` -> pass
+
+Follow-ups:
+
+- Keep redux-form `fields.push/remove` calls event/effect-driven (not render-driven) in future slices.