fix: fast refresh with hoc(withForm)

[mdm317]

🎯 Changes

fixes #1870
Refactor WithForm to avoid using anonymous functions

cause

Fast Refresh breaks when an HOC returns an anonymous function and the same file has another component.

example code

import { withForm } from './form-api'

export type FormValues = {
  firstName: string
}
const AnyComponent = ()=>{
  return <h1>hello</h1>
}
export const ExampleForm = withForm({
  defaultValues: {
    firstName: 'tttt',
  },
  render: () => {

    return (
      <form>
        <h2>TanStack withForm Example</h2>
      </form>
    )
  },
})

Possibly related:
next-discussions-37405

reproduction

The following CodeSandbox demonstrates the behavior:

• When FastRefresh is modified and saved, Fast Refresh works as expected.
• When NoFastRefresh is modified and saved, Fast Refresh does not run.

code sandbox

✅ Checklist

• I have followed the steps in the Contributing guide.
• I have tested this code locally with pnpm test:pr.

🚀 Release Impact

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

[changeset-bot]

🦋 Changeset detected

Latest commit: 4dc2bd1

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/react-form-nextjs	Patch
@tanstack/react-form-remix	Patch
@tanstack/react-form-start	Patch
@tanstack/form-core	Patch
@tanstack/angular-form	Patch
@tanstack/vue-form	Patch
@tanstack/solid-form	Patch
@tanstack/svelte-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

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 4dc2bd1

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

---

☁️ Nx Cloud last updated this comment at 2026-03-06 10:22:09 UTC

[mdm317]

I closed this PR by mistake and reopened it.

[pkg-pr-new]

More templates

• @tanstack/form-example-angular-array
• @tanstack/form-example-angular-large-form
• @tanstack/form-example-angular-simple
• @tanstack/form-example-angular-standard-schema
• @tanstack/form-example-lit-array
• @tanstack/form-example-lit-simple
• @tanstack/form-example-lit-standard-schema
• @tanstack/form-example-lit-ui-libraries
• @tanstack/form-example-react-array
• @tanstack/form-example-react-compiler
• @tanstack/form-example-react-devtools
• @tanstack/form-example-react-dynamic
• @tanstack/field-errors-from-form-validators
• @tanstack/form-example-react-large-form
• @tanstack/form-example-react-next-server-actions
• @tanstack/form-example-react-next-server-actions-zod
• @tanstack/form-example-react-query-integration
• @tanstack/form-example-remix
• @tanstack/form-example-react-simple
• @tanstack/form-example-react-standard-schema
• @tanstack/form-example-react-tanstack-start
• @tanstack/form-example-react-ui-libraries
• @tanstack/form-example-solid-array
• @tanstack/form-example-solid-devtools
• @tanstack/form-example-solid-large-form
• @tanstack/form-example-solid-simple
• @tanstack/form-example-solid-standard-schema
• @tanstack/form-example-svelte-array
• @tanstack/form-example-svelte-large-form
• @tanstack/form-example-svelte-simple
• @tanstack/form-example-svelte-standard-schema
• @tanstack/form-example-vue-array
• @tanstack/form-example-vue-simple
• @tanstack/form-example-vue-standard-schema

@tanstack/angular-form

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

@tanstack/form-core

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

@tanstack/form-devtools

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

@tanstack/lit-form

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

@tanstack/react-form

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

@tanstack/react-form-devtools

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

@tanstack/react-form-nextjs

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

@tanstack/react-form-remix

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

@tanstack/react-form-start

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

@tanstack/solid-form

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

@tanstack/solid-form-devtools

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

@tanstack/svelte-form

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

@tanstack/vue-form

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

commit: 0b9dd9d

[sentry]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 56.32%. Comparing base (6892ed0) to head (4dc2bd1).
⚠️ Report is 146 commits behind head on main.

Additional details and impacted files

@@             Coverage Diff             @@
##             main    #2067       +/-   ##
===========================================
- Coverage   90.35%   56.32%   -34.03%     
===========================================
  Files          38       18       -20     
  Lines        1752      245     -1507     
  Branches      444       45      -399     
===========================================
- Hits         1583      138     -1445     
+ Misses        149       92       -57     
+ Partials       20       15        -5     

☔ View full report in Codecov by Sentry.
📢 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.