fix(react-form): [v2] provide field context inside app form `ArrayField` by kkatalz · Pull Request #2434 · TanStack/form

kkatalz · 2026-10-18T12:56:34Z

🎯 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.

The app form replaces `Field` with a component that provides the field context, but keeps the plain `ArrayField`, so a registered field component rendered inside `form.ArrayField` or a form group's `ArrayField` throws "Field components must be used within a `form.Field` component", although the types offer it there. Let `createFieldWithContext` take the field subscription and use it with the array subscription for both, in React and Preact. Solid and Vue already provide the context for arrays.

changeset-bot · 2026-10-18T12:56:39Z

🦋 Changeset detected

Latest commit: 1869c6d

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 · 2026-10-18T12:56:49Z

Important

Review skipped

Review was skipped as selected files did not have any reviewable changes.

⚙️ Run configuration

Configuration used: Repository: TanStack/form/.coderabbit.yaml
Review profile: CHILL
Plan: Advanced
Run ID: cad90d02-574e-45cc-9261-fb94862bac8e

📥 Commits

Reviewing files that changed from the base of the PR and between deafb2d and 1869c6d.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

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.

✨ 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

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

nx-cloud · 2026-10-20T15:57:39Z

View your CI Pipeline Execution ↗ for commit 1869c6d

Command	Status	Duration	Result
`nx affected --targets=test:sherif,test:knip,tes...`	✅ Succeeded	1m 24s	View ↗
`nx run-many --target=build --exclude=examples/**`	✅ Succeeded	1s	View ↗

☁️ Nx Cloud last updated this comment at 2026-10-21 07:30:20 UTC

pkg-pr-new · 2026-10-20T15:59:11Z

More templates

@tanstack/angular-form

npm i https://pkg.pr.new/@tanstack/angular-form@2434

@tanstack/form-core

npm i https://pkg.pr.new/@tanstack/form-core@2434

@tanstack/form-devtools

npm i https://pkg.pr.new/@tanstack/form-devtools@2434

@tanstack/lit-form

npm i https://pkg.pr.new/@tanstack/lit-form@2434

@tanstack/preact-form

npm i https://pkg.pr.new/@tanstack/preact-form@2434

@tanstack/react-form

npm i https://pkg.pr.new/@tanstack/react-form@2434

@tanstack/react-form-devtools

npm i https://pkg.pr.new/@tanstack/react-form-devtools@2434

@tanstack/react-form-nextjs

npm i https://pkg.pr.new/@tanstack/react-form-nextjs@2434

@tanstack/react-form-start

npm i https://pkg.pr.new/@tanstack/react-form-start@2434

@tanstack/solid-form

npm i https://pkg.pr.new/@tanstack/solid-form@2434

@tanstack/solid-form-devtools

npm i https://pkg.pr.new/@tanstack/solid-form-devtools@2434

@tanstack/svelte-form

npm i https://pkg.pr.new/@tanstack/svelte-form@2434

@tanstack/vue-form

npm i https://pkg.pr.new/@tanstack/vue-form@2434

commit: 1869c6d

LeCarbonator

LGTM! Thanks for tackling the oversight.

Don't worry about the zizmor report, we got some upstream things to fix before resolving this.

React unit tests are planned to be changed architecturally, but that'll take a while. The unit tests you added should do fine until then.

codecov-commenter · 2026-10-20T16:01:34Z

⚠️ Please install the to ensure uploads and comments are reliably processed by Codecov.

Codecov Report

✅ All modified and coverable lines are covered by tests.
⚠️ Please upload report for BASE (alpha@e6fd415). Learn more about missing BASE report.
❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files

@@           Coverage Diff            @@
##             alpha    #2434   +/-   ##
========================================
  Coverage         ?   93.58%           
========================================
  Files            ?       30           
  Lines            ?      483           
  Branches         ?       41           
========================================
  Hits             ?      452           
  Misses           ?       30           
  Partials         ?        1

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

LeCarbonator approved these changes Oct 20, 2026

View reviewed changes

Merge branch 'alpha' into fix/provide-field-context-inside-app-form

1869c6d

LeCarbonator merged commit fceed8a into TanStack:alpha Oct 21, 2026
9 checks passed

github-actions Bot mentioned this pull request Oct 21, 2026

ci: Version Packages (alpha) #2368

Merged

Navigation Menu

Repository navigation

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

fix(react-form): [v2] provide field context inside app form `ArrayField`#2434
LeCarbonator merged 2 commits into
TanStack:alphafrom
kkatalz:fix/provide-field-context-inside-app-form

kkatalz commented Oct 18, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

changeset-bot Bot commented Oct 18, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Oct 18, 2026 •

edited

Loading

Review skipped

Uh oh!

nx-cloud Bot commented Oct 20, 2026 •

edited

Loading

Uh oh!

pkg-pr-new Bot commented Oct 20, 2026 •

edited

Loading

Uh oh!

LeCarbonator left a comment

Uh oh!

codecov-commenter commented Oct 20, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

kkatalz commented Oct 18, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎯 Changes

✅ Checklist

🚀 Release Impact

Summary by CodeRabbit

Uh oh!

changeset-bot Bot commented Oct 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

coderabbitai Bot commented Oct 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

nx-cloud Bot commented Oct 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new Bot commented Oct 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

LeCarbonator left a comment

Choose a reason for hiding this comment

Uh oh!

codecov-commenter commented Oct 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

kkatalz commented Oct 18, 2026 •

edited by coderabbitai Bot

Loading

changeset-bot Bot commented Oct 18, 2026 •

edited

Loading

coderabbitai Bot commented Oct 18, 2026 •

edited

Loading

nx-cloud Bot commented Oct 20, 2026 •

edited

Loading

pkg-pr-new Bot commented Oct 20, 2026 •

edited

Loading

codecov-commenter commented Oct 20, 2026 •

edited

Loading