From 52071058d6560e0a6aea23a85706e42122b6d1aa Mon Sep 17 00:00:00 2001
From: robbond <rob@rdbsolutions.co.uk>
Date: Tue, 7 Apr 2026 12:30:35 +0100
Subject: [PATCH] Fix MultiLinefield hook order warning

---
 components/elements/index.js |  5 +++--
 memory-bank/change-log.md    | 26 ++++++++++++++++++++++++++
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/components/elements/index.js b/components/elements/index.js
index 8c18a759..1e161433 100644
--- a/components/elements/index.js
+++ b/components/elements/index.js
@@ -249,6 +249,7 @@ export function MultiLinefield(props) {
 
     //console.log(showIfHasParentShowValue, formProps[form].values[parentField]);
     let { t } = useTranslation();
+    const translatedLabel = FieldsTranslations(props.label);
 
     const requiredMessage = t("newappeal:is-required-label");
     const emojiNotAllowedMessage = t("newappeal:emojis-not-allowed-label");
@@ -259,7 +260,7 @@ export function MultiLinefield(props) {
                 showIfHasParentShowValue && (
                     <div>
                         <label className="govuk-label" htmlFor={props.name}>
-                            {FieldsTranslations(props.label)}
+                            {translatedLabel}
                         </label>
 
                         <div
@@ -296,7 +297,7 @@ export function MultiLinefield(props) {
             ) : (
                 <div className="govuk-form-group">
                     <label className="govuk-label" htmlFor={props.name}>
-                        {FieldsTranslations(props.label)}
+                        {translatedLabel}
                     </label>
                     <div
                         id={props.name + "-hint"}
diff --git a/memory-bank/change-log.md b/memory-bank/change-log.md
index 8983ed36..0a94ddb4 100644
--- a/memory-bank/change-log.md
+++ b/memory-bank/change-log.md
@@ -3421,3 +3421,29 @@ Validation:
 Follow-ups:
 
 - Continue Phase 2 with one bounded no-behavior-change slice, likely next lowest-risk renderer extraction from `components/elements/index.js`.
+
+---
+
+### CL-095: 22500 `components/elements/index.js` hook-order hotfix (`MultiLinefield`)
+
+date: 2026-04-07
+author: Cline
+scope: `components/elements/index.js`
+type: change
+rationale: Fix runtime React warning caused by conditional hook execution path in `MultiLinefield` after dead-code cleanup.
+impact: No functional behavior change intended; resolves Rules of Hooks ordering warning by making label translation hook usage unconditional per render.
+status: completed
+
+Summary:
+
+- Root cause: `FieldsTranslations(props.label)` (which internally uses `useRouter`) was invoked within conditional render branches in `MultiLinefield`, causing hook order mismatch when branch conditions changed.
+- Fix: precomputed `translatedLabel` once in `MultiLinefield` render body and reused in both branches.
+- Kept EN/CY text resolution logic and rendered output unchanged.
+
+Validation:
+
+- `npx eslint components/elements/index.js` -> pass
+
+Follow-ups:
+
+- Continue bounded Phase 2 slices; when touching field components, prefer top-level computed hook-backed values reused across conditional branches.