Fix MultiLinefield hook order warning
This commit is contained in:
@@ -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.
|
||||
|
||||
Reference in New Issue
Block a user