gruperly/.agents/skills/react-hook-form/references/array-unique-fieldarray-per-name.md

title, impact, impactDescription, tags

title	impact	impactDescription	tags
Use Single useFieldArray Instance Per Field Name	MEDIUM-HIGH	prevents state conflicts from duplicate subscriptions	array, useFieldArray, instance, state-management

Use Single useFieldArray Instance Per Field Name

Each field name should have only one useFieldArray instance. Multiple instances managing the same field name cause state conflicts and unpredictable behavior.

Incorrect (multiple instances for same field):

function OrderForm() {
  const { control } = useForm()

  return (
    <div>
      <ItemsList control={control} />
      <ItemsSummary control={control} />
    </div>
  )
}

function ItemsList({ control }: { control: Control }) {
  const { fields, append } = useFieldArray({ control, name: 'items' })  // Instance 1
  return <div>{/* render items */}</div>
}

function ItemsSummary({ control }: { control: Control }) {
  const { fields } = useFieldArray({ control, name: 'items' })  // Instance 2 - conflicts!
  return <div>Total items: {fields.length}</div>
}

Correct (single instance, pass fields down or use useWatch):

function OrderForm() {
  const { control } = useForm()
  const { fields, append, remove } = useFieldArray({ control, name: 'items' })

  return (
    <div>
      <ItemsList fields={fields} append={append} remove={remove} />
      <ItemsSummary control={control} />  {/* Uses useWatch, not useFieldArray */}
    </div>
  )
}

function ItemsSummary({ control }: { control: Control }) {
  const items = useWatch({ control, name: 'items' })  // Read-only subscription
  return <div>Total items: {items?.length ?? 0}</div>
}

Reference: useFieldArray