Skip to content

Extract controlled field array logic into reusable hook#4009

Merged
gilgardosh merged 2 commits into
renovate/react-hook-form-7.xfrom
claude/react-hook-form-fieldarray-types-50br1m
Jul 22, 2026
Merged

Extract controlled field array logic into reusable hook#4009
gilgardosh merged 2 commits into
renovate/react-hook-form-7.xfrom
claude/react-hook-form-fieldarray-types-50br1m

Conversation

@gilgardosh

Copy link
Copy Markdown
Collaborator

Summary

Refactors repeated field array control logic across multiple components into a new useControlledFieldArray hook. This hook wraps useFieldArray and merges registered fields with watched values, ensuring components always render current values while maintaining stable field IDs.

Key Changes

  • New hook: useControlledFieldArray in packages/client/src/hooks/use-controlled-field-array.ts

    • Encapsulates the pattern of watching field array values and merging them with registered fields
    • Exports FieldArrayItem type to replace the now-shadowed FieldArray type from react-hook-form v7.82+
    • Returns controlledFields, append, remove, and watchFieldArray
  • Updated components to use the new hook:

    • FlightPathInput
    • StringArrayInput
    • ChargeSpreadInput
    • AttendeesStayInput
  • Type safety improvements: Replaced casts using the deprecated FieldArray type with the new FieldArrayItem type

Implementation Details

The hook eliminates boilerplate by automatically:

  1. Calling useFieldArray with the provided control and array path
  2. Watching the field array values
  3. Merging watched values with field metadata (preserving stable IDs)
  4. Returning the merged fields alongside append and remove actions

This 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

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
@gilgardosh
gilgardosh temporarily deployed to accounter-fullstack July 21, 2026 15:07 — with GitHub Actions Inactive
@gilgardosh
gilgardosh temporarily deployed to accounter-fullstack July 21, 2026 15:07 — with GitHub Actions Inactive

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment thread packages/client/src/hooks/use-controlled-field-array.ts Outdated
@gilgardosh gilgardosh self-assigned this Jul 22, 2026
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
@gilgardosh
gilgardosh temporarily deployed to accounter-fullstack July 22, 2026 13:40 — with GitHub Actions Inactive
@gilgardosh
gilgardosh temporarily deployed to accounter-fullstack July 22, 2026 13:40 — with GitHub Actions Inactive
@gilgardosh
gilgardosh merged commit f8bd115 into renovate/react-hook-form-7.x Jul 22, 2026
8 checks passed
@gilgardosh
gilgardosh deleted the claude/react-hook-form-fieldarray-types-50br1m branch July 22, 2026 13:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants