Skip to content

fix: re-export useSelector and document useStore migration#2206

Open
hemraj-007 wants to merge 2 commits into
TanStack:mainfrom
hemraj-007:fix/use-selector-export-2203
Open

fix: re-export useSelector and document useStore migration#2206
hemraj-007 wants to merge 2 commits into
TanStack:mainfrom
hemraj-007:fix/use-selector-export-2203

Conversation

@hemraj-007
Copy link
Copy Markdown

@hemraj-007 hemraj-007 commented Jun 4, 2026

  • Re-export useSelector from TanStack Store in react/preact/vue/solid/svelte form packages
  • Keep deprecated useStore export for backward compatibility
  • Add form.useSelector on Vue, Solid, and Svelte (deprecate form.useStore)
  • Update docs, examples, changeset, and add exports.test.ts for react-form

Summary by CodeRabbit

  • New Features

    • Added form.useSelector (and re-exported useSelector) across React, Preact, Vue, Solid, and Svelte adapters for selector-based subscriptions.
  • Deprecations

    • form.useStore is deprecated and now an alias of useSelector; prefer useSelector to avoid unnecessary re-renders.
  • Documentation

    • Guides, references, changelogs, and examples updated with useSelector usage and migration guidance from useStore.

Re-export useSelector from TanStack Store adapters so consumers can
import it from @tanstack/form packages instead of only the deprecated
useStore alias. Updates docs, examples, and adds form.useSelector for
Vue, Solid, and Svelte.
Fixes TanStack#2203
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Jun 4, 2026

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: e92b8048-968c-4b65-a121-f87a9fca9c39

📥 Commits

Reviewing files that changed from the base of the PR and between dc5e9a0 and 174ab49.

📒 Files selected for processing (1)
  • docs/framework/preact/guides/basic-concepts.md
🚧 Files skipped from review as they are similar to previous changes (1)
  • docs/framework/preact/guides/basic-concepts.md

📝 Walkthrough

Walkthrough

This PR introduces useSelector as the recommended hook for subscribing to form state across all TanStack Form framework adapters (React, Preact, Vue, Solid, Svelte), deprecating the older useStore hook. The changes include re-exporting useSelector from TanStack Store adapters, replacing internal useStore calls with useSelector, adding useSelector API methods to framework-specific form objects, and updating documentation, examples, and changelogs.

Changes

useSelector Export and Implementation Across All Frameworks

Layer / File(s) Summary
Package exports: re-export useSelector from store adapters
packages/react-form/src/index.ts, packages/preact-form/src/index.ts, packages/vue-form/src/index.ts, packages/solid-form/src/index.ts, packages/svelte-form/src/index.ts
All framework package entry points now re-export useSelector alongside useStore from their respective TanStack Store adapters.
React and Preact: useSelector hook implementation in form utilities
packages/react-form/src/useField.tsx, packages/react-form/src/useFieldGroup.tsx, packages/react-form/src/useForm.tsx, packages/react-form/src/useFormGroup.tsx, packages/preact-form/src/useField.tsx, packages/preact-form/src/useFieldGroup.tsx, packages/preact-form/src/useForm.tsx, packages/preact-form/src/useFormGroup.tsx
All React and Preact form hooks (useField, useFieldGroup, useForm, useFormGroup) switch their internal store subscriptions from useStore to useSelector for reading reactive state slices.
Vue, Solid, Svelte: add useSelector method to form API
packages/vue-form/src/useForm.tsx, packages/solid-form/src/createForm.tsx, packages/svelte-form/src/createForm.svelte.ts
Framework-specific form API types (VueFormApi, SolidFormApi, SvelteFormApi) add new useSelector method; existing useStore method is deprecated and re-aliased to useSelector in runtime implementation.
Vue, Solid, Svelte: useSelector in form hooks and store subscriptions
packages/vue-form/src/useField.tsx, packages/vue-form/src/useFormGroup.tsx, packages/solid-form/src/createField.tsx, packages/solid-form/src/createFieldGroup.tsx, packages/solid-form/src/createFormGroup.tsx, packages/svelte-form/src/Field.svelte, packages/svelte-form/src/FormGroup.svelte, packages/svelte-form/src/Subscribe.svelte
Vue, Solid, and Svelte form hooks and components switch to using useSelector for state subscriptions, and form Subscribe components updated to derive state via useSelector.
Documentation: framework guides (Reactivity, Validation, Composition)
docs/framework/react/guides/basic-concepts.md, docs/framework/react/guides/form-composition.md, docs/framework/react/guides/reactivity.md, docs/framework/react/guides/ssr.md, docs/framework/react/guides/validation.md, docs/framework/preact/guides/*, docs/framework/solid/guides/*, docs/framework/svelte/guides/*, docs/framework/vue/guides/*
All framework guides updated to recommend useSelector for state subscriptions, with example code showing the selector pattern, and migration notes indicating useStore is deprecated.
Documentation: API reference pages (useSelector, useStore deprecation)
docs/framework/react/reference/index.md, docs/framework/react/reference/variables/useSelector.md, docs/framework/react/reference/variables/useStore.md, docs/framework/preact/reference/index.md, docs/framework/preact/reference/variables/useSelector.md, docs/framework/preact/reference/variables/useStore.md
New useSelector reference documentation pages added for each framework, explaining the hook signature, usage, and migration from useStore; existing useStore deprecation pages expanded with import guidance.
Examples and tests
examples/react/large-form/src/components/text-fields.tsx, examples/react/multi-step-wizard/src/components/text-fields.tsx, packages/react-form/tests/exports.test.ts
Example React components updated to use useSelector; new export test verifies both useSelector and useStore are properly exported from react-form.
Changelog updates
.changeset/use-selector-export.md, packages/react-form/CHANGELOG.md, packages/preact-form/CHANGELOG.md, packages/solid-form/CHANGELOG.md, packages/svelte-form/CHANGELOG.md, packages/vue-form/CHANGELOG.md
All framework package changelogs document the patch release: useSelector re-exported from TanStack Store adapters, useStore deprecated with migration guidance, addressing issue #2203.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related issues

Suggested reviewers

  • tannerlinsley

Poem

🐰 I hopped through code and changed the call,

From useStore to useSelector for one and all.
From React to Svelte I nimbly skipped,
Docs and tests updated — no selectors skipped.
A tiny rabbit cheers the tidy spree!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 18.75% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title 'fix: re-export useSelector and document useStore migration' accurately describes the main changes: re-exporting useSelector and documenting the migration from useStore.
Description check ✅ Passed The description covers the main objectives: re-exporting useSelector, keeping useStore deprecated, adding form.useSelector, and updating docs/examples. It follows a clear bullet-point structure aligned with the template's purpose.
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 unit tests (beta)
  • Create PR with unit tests

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.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@docs/framework/preact/guides/basic-concepts.md`:
- Line 239: The prose examples currently reference useSelector(form.store)
without a selector which contradicts the guidance; update both narrative
mentions (the one at the shown diff and the other at the occurrence around line
268) to include a selector argument (e.g., useSelector(form.store, selector) or
a brief inline example like useSelector(form.store, s => s.values)) so the
documentation consistently demonstrates using useSelector(form.store, …) instead
of the no-selector form; adjust the text around form.Subscribe and useSelector
to reflect the selector usage.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 483e66b4-2bda-4b5a-9e54-62c71ddc3fe4

📥 Commits

Reviewing files that changed from the base of the PR and between 6a73479 and dc5e9a0.

📒 Files selected for processing (55)
  • .changeset/use-selector-export.md
  • docs/framework/preact/guides/basic-concepts.md
  • docs/framework/preact/guides/form-composition.md
  • docs/framework/preact/guides/reactivity.md
  • docs/framework/preact/guides/validation.md
  • docs/framework/preact/reference/index.md
  • docs/framework/preact/reference/variables/useSelector.md
  • docs/framework/preact/reference/variables/useStore.md
  • docs/framework/react/guides/basic-concepts.md
  • docs/framework/react/guides/form-composition.md
  • docs/framework/react/guides/reactivity.md
  • docs/framework/react/guides/ssr.md
  • docs/framework/react/guides/validation.md
  • docs/framework/react/reference/index.md
  • docs/framework/react/reference/variables/useSelector.md
  • docs/framework/react/reference/variables/useStore.md
  • docs/framework/solid/guides/basic-concepts.md
  • docs/framework/solid/guides/form-composition.md
  • docs/framework/solid/guides/validation.md
  • docs/framework/svelte/guides/basic-concepts.md
  • docs/framework/svelte/guides/validation.md
  • docs/framework/vue/guides/basic-concepts.md
  • docs/framework/vue/guides/validation.md
  • examples/react/large-form/src/components/text-fields.tsx
  • examples/react/multi-step-wizard/src/components/text-fields.tsx
  • packages/preact-form/CHANGELOG.md
  • packages/preact-form/src/index.ts
  • packages/preact-form/src/useField.tsx
  • packages/preact-form/src/useFieldGroup.tsx
  • packages/preact-form/src/useForm.tsx
  • packages/preact-form/src/useFormGroup.tsx
  • packages/react-form/CHANGELOG.md
  • packages/react-form/src/index.ts
  • packages/react-form/src/useField.tsx
  • packages/react-form/src/useFieldGroup.tsx
  • packages/react-form/src/useForm.tsx
  • packages/react-form/src/useFormGroup.tsx
  • packages/react-form/tests/exports.test.ts
  • packages/solid-form/CHANGELOG.md
  • packages/solid-form/src/createField.tsx
  • packages/solid-form/src/createFieldGroup.tsx
  • packages/solid-form/src/createForm.tsx
  • packages/solid-form/src/createFormGroup.tsx
  • packages/solid-form/src/index.tsx
  • packages/svelte-form/CHANGELOG.md
  • packages/svelte-form/src/Field.svelte
  • packages/svelte-form/src/FormGroup.svelte
  • packages/svelte-form/src/Subscribe.svelte
  • packages/svelte-form/src/createForm.svelte.ts
  • packages/svelte-form/src/index.ts
  • packages/vue-form/CHANGELOG.md
  • packages/vue-form/src/index.ts
  • packages/vue-form/src/useField.tsx
  • packages/vue-form/src/useForm.tsx
  • packages/vue-form/src/useFormGroup.tsx

Comment thread docs/framework/preact/guides/basic-concepts.md Outdated
@hemraj-007
Copy link
Copy Markdown
Author

Updated prose to use useSelector(form.store, …) for consistency

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.

1 participant