fix(react-form): [v2] provide field context inside app form ArrayField

[kkatalz]

🎯 Changes

With createFormHook, a registered field component inside form.ArrayField (or a form group's ArrayField) throws TanStack Form: Field components must be used within a `form.Field` component. The types allow this: react-form's own type test renders <field.feedback.FieldInfo /> inside form.ArrayField (createFormHook.test-d.tsx#L213-L216).

The app form only wraps Field with createFieldWithContext (ReactAppFormApi.lib.ts#L50-L58), so ArrayField and the group ArrayField never provide FieldContext. Preact has the same gap; Solid and Vue already provide the context there.

createFieldWithContext now takes the field subscription hook (default useValueFieldSubscription) and both array components pass useArrayFieldSubscription, so they still rerender only on length and _arrayVersion changes. Same fix in Preact, whose group ArrayField goes through form.ArrayField. Also updated the fieldComponent JSDoc.

Added a test per adapter in createFormHook.spec.tsx: a field component inside form.ArrayField and inside a group ArrayField renders, updates after pushValue, and a child value change doesn't rerender the array children. On alpha it fails in React (normal and strict) and Preact with:

 FAIL  |@tanstack/react-form: normal (chromium)| tests/createFormHook.spec.tsx:46 > createFormHook > provides field context to field components inside an ArrayField
Error: TanStack Form: Field components must be used within a `form.Field` component.

It passes with the fix, and pnpm test:pr passes locally (28 projects affected).

✅ Checklist

• I have followed the steps in the Contributing guide.
• I have tested code changes locally with pnpm test:pr, or these tests do not apply to this pull request.
• I fully understand the code in this pull request, including any code generated with AI assistance.

🚀 Release Impact

• This change affects published code, and I have generated a changeset.
• This change is docs/CI/dev-only (no release).

Summary by CodeRabbit

• Bug Fixes
  • Registered field components now render correctly inside top-level and grouped ArrayField render callbacks in React and Preact forms, rather than throwing an error.
  • Array item updates continue to avoid unnecessary field component re-renders.

[changeset-bot]

🦋 Changeset detected

Latest commit: deafb2d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 13 packages

Name	Type
@tanstack/react-form	Patch
@tanstack/preact-form	Patch
@tanstack/angular-form	Patch
@tanstack/form-core	Patch
@tanstack/react-form-nextjs	Patch
@tanstack/react-form-start	Patch
@tanstack/solid-form	Patch
@tanstack/svelte-form	Patch
@tanstack/vue-form	Patch
@tanstack/form-devtools	Patch
@tanstack/lit-form	Patch
@tanstack/react-form-devtools	Patch
@tanstack/solid-form-devtools	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Repository: TanStack/form/.coderabbit.yaml
• Review profile: CHILL
• Plan: Advanced
• Run ID: 729b90c0-53d5-48e8-ac10-865ffd451475

📥 Commits

Reviewing files that changed from the base of the PR and between 3d39077 and deafb2d.

📒 Files selected for processing: 7

• .changeset/quiet-arrays-share.md
• packages/preact-form/src/AppForm/Components.lib.tsx
• packages/preact-form/tests/createFormHook.spec.tsx
• packages/react-form/src/AppForm/Components.lib.tsx
• packages/react-form/src/AppForm/ReactAppFormApi.lib.ts
• packages/react-form/src/AppForm/getFormHookHelpers.public.ts
• packages/react-form/tests/createFormHook.spec.tsx

Included review availability: This review used your included allowance. Your plan provides up to 8 included reviews per hour; 7 remain after this review.

📝 Walkthrough

React and Preact App Form ArrayField components now use array-field subscriptions to provide field context. Tests cover strict field components in direct and grouped arrays, including item counts and render counts.

Changes: ArrayField field context

Layer / File(s)	Summary
ArrayField context and validation packages/react-form/src/AppForm/Components.lib.tsx, packages/react-form/src/AppForm/ReactAppFormApi.lib.ts, packages/preact-form/src/AppForm/Components.lib.tsx, packages/react-form/tests/createFormHook.spec.tsx, packages/preact-form/tests/createFormHook.spec.tsx, packages/react-form/src/AppForm/getFormHookHelpers.public.ts, .changeset/quiet-arrays-share.md	createFieldWithContext accepts a subscription hook, and React and Preact App Form ArrayField components pass the array-field subscription hook. Tests check strict field components in direct and grouped arrays, item counts, and render counts. The helper documentation mentions ArrayField, and a changeset declares patch releases for both packages.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~12 minutes

Change: Bug fix

Suggested reviewers: lecarbonator, crutchcorn

Merge Risk: ⚪ Minimal · up to deafb

The ArrayField context change appears ready to merge after normal checks. No concrete issue remains that would block registered field components from rendering in the supported array contexts.

Pre-merge checks: 4 · 1

Failed checks: 1 warning

Check name	Status	Explanation	Resolution
Docstring Coverage		Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 9 functions across 6 files. (1 skipped: 1 …	Write docstrings for the functions missing them to satisfy the coverage threshold.

Passed checks: 4 passed

Check name	Status	Explanation
Title check		The title clearly identifies the primary fix: providing field context inside App Form ArrayField components for React Form. It is concise and specific.
Description check		The description explains the issue, implementation, affected adapters, tests, test results, and release impact. All required template sections are present and the checklist is completed accurately.
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 9 functions across 6 files. (1 skipped: 1 unsupported.)

Resolution

Write docstrings for the functions missing them to satisfy the coverage threshold.

• Fix all pre-merge checks with AI

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}