fix(svelte-form): prevent full array re-renders in array mode by crutchcorn · Pull Request #2170 · TanStack/form

crutchcorn · 2026-05-10T20:58:22Z

Mirrors #1963 but for the Svelte adapter

Summary by CodeRabbit

Bug Fixes
- Resolved performance issue causing full array re-renders in array mode.
Documentation
- Updated guides and examples to demonstrate array mode usage for form fields.
Tests
- Added test suite for array mode functionality to ensure reliability.

coderabbitai · 2026-05-10T20:58:34Z

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

This PR implements selective re-render tracking for Svelte form fields to eliminate unnecessary full array re-renders in array mode. Field state now uses multiple selector-based subscriptions instead of snapshot snapshots, with documentation, examples, and tests demonstrating and verifying the behavior.

Changes

Array Mode Optimization

Layer / File(s)	Summary
Field State Tracking with Selectors `packages/svelte-form/src/Field.svelte`	Replaced single store snapshot with multiple `useStore(api.store, selector)` subscriptions for `value`, `isTouched`, `isBlurred`, `isDirty`, `errorMap`, `errorSourceMap`, and `isValidating`. State getter derives output by spreading base state and overriding with tracked selectors.
Example and Documentation Updates `docs/framework/svelte/guides/arrays.md`, `examples/svelte/array/src/App.svelte`	Updated documentation example and demo to use `mode="array"` on people field declarations.
Array Mode Test Component and Suite `packages/svelte-form/tests/array.svelte`, `packages/svelte-form/tests/array.test.ts`	Added test component initializing form with `defaultValues.test` as `['a']`, rendering field in array mode, and button to push `'b'`. Test suite mounts component, asserts initial state, simulates click, and verifies updated array value.
Release Notes `.changeset/public-knives-dress.md`	Changeset documenting patch for `@tanstack/svelte-form` noting fix to prevent full array re-renders.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 Arrays now hop without a care,
Selective tracking here and there,
No needless renders fill the air,
Just values changed—a lighter share!
SvelteForm hops with newfound grace,
Array mode wins the speed-up race! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description is minimal and does not follow the provided template structure. Required sections like '🎯 Changes' and '✅ Checklist' are missing, and the checklist items are not marked.	Complete the PR description by filling in the template sections: provide detailed explanation of changes in '🎯 Changes' section and check off the relevant boxes in the '✅ Checklist' and '🚀 Release Impact' sections.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title clearly and specifically describes the main change: preventing full array re-renders in array mode for the svelte-form package, which matches the core objective.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch fix-svelte-array-mode

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 and usage tips.}

nx-cloud · 2026-05-10T20:58:47Z

View your CI Pipeline Execution ↗ for commit 40c7757

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

☁️ Nx Cloud last updated this comment at 2026-05-10 20:59:39 UTC

github-actions · 2026-05-10T20:59:05Z

🚀 Changeset Version Preview

3 package(s) bumped directly, 11 bumped as dependents.

🟨 Minor bumps

Package	Version	Reason
`@tanstack/form-core`	1.31.0 → 1.32.0	Changeset
`@tanstack/svelte-form`	1.31.0 → 1.32.0	Changeset
`@tanstack/vue-form`	1.31.0 → 1.32.0	Changeset
`@tanstack/angular-form`	1.31.0 → 1.32.0	Dependent
`@tanstack/react-form`	1.31.0 → 1.32.0	Dependent
`@tanstack/react-form-nextjs`	1.31.0 → 1.32.0	Dependent
`@tanstack/react-form-remix`	1.31.0 → 1.32.0	Dependent
`@tanstack/react-form-start`	1.31.0 → 1.32.0	Dependent
`@tanstack/solid-form`	1.31.0 → 1.32.0	Dependent

🟩 Patch bumps

Package	Version	Reason
`@tanstack/form-devtools`	0.2.26 → 0.2.27	Dependent
`@tanstack/lit-form`	1.24.0 → 1.24.1	Dependent
`@tanstack/preact-form`	1.29.6 → 1.29.7	Dependent
`@tanstack/react-form-devtools`	0.2.26 → 0.2.27	Dependent
`@tanstack/solid-form-devtools`	0.2.26 → 0.2.27	Dependent

pkg-pr-new · 2026-05-10T20:59:26Z

More templates

@tanstack/angular-form

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

@tanstack/form-core

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

@tanstack/form-devtools

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

@tanstack/lit-form

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

@tanstack/preact-form

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

@tanstack/react-form

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

@tanstack/react-form-devtools

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

@tanstack/react-form-nextjs

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

@tanstack/react-form-remix

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

@tanstack/react-form-start

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

@tanstack/solid-form

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

@tanstack/solid-form-devtools

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

@tanstack/svelte-form

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

@tanstack/vue-form

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

commit: 40c7757

sentry · 2026-05-10T20:59:56Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 86.31%. Comparing base (6892ed0) to head (40c7757).
⚠️ Report is 205 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2170      +/-   ##
==========================================
- Coverage   90.35%   86.31%   -4.04%     
==========================================
  Files          38        8      -30     
  Lines        1752       95    -1657     
  Branches      444        8     -436     
==========================================
- Hits         1583       82    -1501     
+ Misses        149       12     -137     
+ Partials       20        1      -19

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

crutchcorn added 2 commits May 10, 2026 16:57

fix(svelte-form): prevent full array re-renders in array mode

a1a20d1

chore: add changeset

40c7757

crutchcorn merged commit 5724658 into main May 10, 2026
7 of 9 checks passed

crutchcorn deleted the fix-svelte-array-mode branch May 10, 2026 21:01

github-actions Bot mentioned this pull request May 10, 2026

ci: Version Packages #2168

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(svelte-form): prevent full array re-renders in array mode#2170

fix(svelte-form): prevent full array re-renders in array mode#2170
crutchcorn merged 2 commits into
mainfrom
fix-svelte-array-mode

crutchcorn commented May 10, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented May 10, 2026 •

edited

Loading

Review failed

Walkthrough

Changes

Estimated code review effort

Poem

❌ Failed checks (1 warning)

Uh oh!

nx-cloud Bot commented May 10, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 10, 2026

Uh oh!

pkg-pr-new Bot commented May 10, 2026

Uh oh!

sentry Bot commented May 10, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

crutchcorn commented May 10, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

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

Uh oh!

Review failed

Walkthrough

Changes

Estimated code review effort

Poem

❌ Failed checks (1 warning)

Uh oh!

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

Uh oh!

Uh oh!

github-actions Bot commented May 10, 2026

🚀 Changeset Version Preview

🟨 Minor bumps

🟩 Patch bumps

Uh oh!

pkg-pr-new Bot commented May 10, 2026

Uh oh!

sentry Bot commented May 10, 2026

Codecov Report

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

crutchcorn commented May 10, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented May 10, 2026 •

edited

Loading

nx-cloud Bot commented May 10, 2026 •

edited

Loading