Extract controlled field array logic into reusable hook#4009
Conversation
react-hook-form 7.82 introduced a FieldArray component whose root export
shadows the FieldArray type, breaking 'import type { FieldArray }'.
Extract the duplicated useFieldArray/watch/merge boilerplate from the four
array-input components into a shared useControlledFieldArray hook, with a
FieldArrayItem type reconstructing the no-longer-importable FieldArray type.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UAZSFDb2GcgSmp5uXhy4w8
There was a problem hiding this comment.
Code Review
This pull request introduces a new custom hook, useControlledFieldArray, which encapsulates the logic of wrapping useFieldArray and merging registered fields with watched values. This hook is then integrated into several input components (AttendeesStayInput, FlightPathInput, ChargeSpreadInput, and StringArrayInput) to reduce boilerplate and unify behavior. Feedback on the hook highlights a critical bug where spreading primitive values (like strings) inside an object literal pollutes the returned object, and suggests improving type safety by genericizing the hook's path parameter.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
Genericize the hook over the array path, type watchFieldArray as the field-array item type, default it to an empty array, and only spread watched values into controlled fields when they are objects — spreading primitive items (string arrays) polluted the merged object with character keys. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01UAZSFDb2GcgSmp5uXhy4w8
Summary
Refactors repeated field array control logic across multiple components into a new
useControlledFieldArrayhook. This hook wrapsuseFieldArrayand merges registered fields with watched values, ensuring components always render current values while maintaining stable field IDs.Key Changes
New hook:
useControlledFieldArrayinpackages/client/src/hooks/use-controlled-field-array.tsFieldArrayItemtype to replace the now-shadowedFieldArraytype from react-hook-form v7.82+controlledFields,append,remove, andwatchFieldArrayUpdated components to use the new hook:
FlightPathInputStringArrayInputChargeSpreadInputAttendeesStayInputType safety improvements: Replaced casts using the deprecated
FieldArraytype with the newFieldArrayItemtypeImplementation Details
The hook eliminates boilerplate by automatically:
useFieldArraywith the provided control and array pathappendandremoveactionsThis ensures all components render always-current values from the form state while keeping field IDs stable for React reconciliation.
https://claude.ai/code/session_01UAZSFDb2GcgSmp5uXhy4w8