Skip to content

Conversation

@AmeerDlshad
Copy link
Contributor

Using any Signal inside the Form.AppField render function causes the entire component to re-run whenever that Signal changes.

Below is an example:

<Form.AppField name="username">
  {(field) => {
    const value = useStore(
      field().store,
      (s) => s.value,
    );
    onMount(() => {
      console.log("Mount"); // This runs every time value changes
    });
    
    console.log(value()); // This runs every time value changes
    
    return <field.TextField label={t`Username`} />;
  }}
</Form.AppField>;

Fix

By wrapping it with a createComponent this no longer happens.

<Form.AppField name="username">
  {(field) =>
    createComponent(() => {
      const value = useStore(field().store, (s) => s.value);
      onMount(() => {
        console.log("Mount");
      });
      
      console.log(value());

      return <field.TextField label={t`Username`} />;
    }, {})
  }
</Form.AppField>;

@changeset-bot
Copy link

changeset-bot bot commented Dec 13, 2025

🦋 Changeset detected

Latest commit: 931a48c

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

This PR includes changesets to release 13 packages
Name Type
@tanstack/solid-form Patch
@tanstack/form-core Patch
@tanstack/react-form Patch
@tanstack/react-form-start Patch
@tanstack/react-form-remix Patch
@tanstack/react-form-nextjs Patch
@tanstack/angular-form Patch
@tanstack/vue-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
Copy link

nx-cloud bot commented Dec 15, 2025

View your CI Pipeline Execution ↗ for commit 931a48c

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

☁️ Nx Cloud last updated this comment at 2025-12-15 11:47:02 UTC

@pkg-pr-new
Copy link

pkg-pr-new bot commented Dec 15, 2025

More templates

@tanstack/angular-form

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

@tanstack/form-core

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

@tanstack/form-devtools

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

@tanstack/lit-form

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

@tanstack/react-form

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

@tanstack/react-form-devtools

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

@tanstack/react-form-nextjs

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

@tanstack/react-form-remix

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

@tanstack/react-form-start

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

@tanstack/solid-form

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

@tanstack/solid-form-devtools

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

@tanstack/svelte-form

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

@tanstack/vue-form

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

commit: 931a48c

@codecov
Copy link

codecov bot commented Dec 15, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 95.28%. Comparing base (6892ed0) to head (931a48c).
⚠️ Report is 97 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #1934      +/-   ##
==========================================
+ Coverage   90.35%   95.28%   +4.92%     
==========================================
  Files          38        4      -34     
  Lines        1752      106    -1646     
  Branches      444        7     -437     
==========================================
- Hits         1583      101    -1482     
+ Misses        149        5     -144     
+ Partials       20        0      -20     

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

Copy link
Member

@crutchcorn crutchcorn left a comment

Choose a reason for hiding this comment

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

Passes tests and LGTM! Thanks!

@crutchcorn crutchcorn merged commit b372d43 into TanStack:main Dec 15, 2025
7 checks passed
@github-actions github-actions bot mentioned this pull request Dec 15, 2025
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