feat!: bring alpha updates and selector retention fixes to main

.changeset/kind-garlics-melt.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/react-store': patch
+---
+
+Fix selections retained by mounted subscriptions and reduce selector callback allocation overhead. Use compact private selection cache fields to reduce consumer bundle size.

.changeset/pre.json

@@ -0,0 +1,4 @@
+{
+  "mode": "pre",
+  "tag": "alpha"
+}

.changeset/pre/grumpy-hairs-shop.md

@@ -0,0 +1,7 @@
+---
+'@tanstack/vue-store': major
+---
+
+Drop Vue 2 support from `@tanstack/vue-store`. The adapter now requires Vue 3 (`vue: ^3.0.0`) and imports Vue APIs and types directly, removing its `vue-demi` dependency and optional `@vue/composition-api` peer dependency.
+
+Vue 2 applications must upgrade to Vue 3 or keep using a previous version of `@tanstack/vue-store`. The adapter's public hooks and their behavior are unchanged for Vue 3 applications.

.changeset/pre/react-store-use-selector-single-ref.md

@@ -0,0 +1,7 @@
+---
+'@tanstack/react-store': major
+---
+
+`@tanstack/react-store` now requires React 18 or newer (`peerDependencies` are `react` and `react-dom` `^18.0.0 || ^19.0.0`); support for React 16.8 and 17 has been dropped.
+
+`useSelector` builds on React's built-in `useSyncExternalStore` with a single memoized selection ref instead of the `use-sync-external-store/shim/with-selector` helper: fewer hook slots and allocations per subscribed component, no per-component passive effect, and the `use-sync-external-store` dependency is gone from consumer bundles. The public API and selection semantics of `useSelector`, `useAtom`, `_useStore` and `useStore` are unchanged.

.github/renovate.json

@@ -28,8 +28,6 @@
     "typescript50",
     "typescript51",
     "typescript52",
-    "typescript53",
-    "vue2",
-    "vue2.7"
+    "typescript53"
   ]
 }

docs/framework/react/reference/functions/useSelector.md

@@ -10,7 +10,7 @@ function useSelector<TSource, TSelected>(
    options?): TSelected;
 ```
 
-Defined in: [packages/react-store/src/useSelector.ts:43](https://github.com/TanStack/store/blob/main/packages/react-store/src/useSelector.ts#L43)
+Defined in: [packages/react-store/src/useSelector.ts:94](https://github.com/TanStack/store/blob/main/packages/react-store/src/useSelector.ts#L94)
 
 Selects a slice of state from an atom or store and subscribes the component
 to that selection.

docs/framework/react/reference/interfaces/UseSelectorOptions.md

@@ -3,7 +3,7 @@ id: UseSelectorOptions
 title: UseSelectorOptions
 ---
 
-Defined in: [packages/react-store/src/useSelector.ts:4](https://github.com/TanStack/store/blob/main/packages/react-store/src/useSelector.ts#L4)
+Defined in: [packages/react-store/src/useSelector.ts:3](https://github.com/TanStack/store/blob/main/packages/react-store/src/useSelector.ts#L3)
 
 ## Type Parameters
 
@@ -19,7 +19,7 @@ Defined in: [packages/react-store/src/useSelector.ts:4](https://github.com/TanSt
 optional compare?: (a, b) => boolean;
 ```
 
-Defined in: [packages/react-store/src/useSelector.ts:5](https://github.com/TanStack/store/blob/main/packages/react-store/src/useSelector.ts#L5)
+Defined in: [packages/react-store/src/useSelector.ts:4](https://github.com/TanStack/store/blob/main/packages/react-store/src/useSelector.ts#L4)
 
 #### Parameters
 

docs/installation.md

@@ -11,7 +11,7 @@ You can install TanStack Store with any [NPM](https://npmjs.com) package manager
 npm install @tanstack/react-store
 ```
 
-TanStack Store is compatible with React v16.8+ and is currently only compatible with ReactDOM only. If you would like to contribute to the React Native adapter, please reach out to us on [Discord](https://tlinz.com/discord).
+TanStack Store is compatible with React v18+.
 
 ## Preact
 
@@ -27,7 +27,7 @@ TanStack Store is compatible with Preact 10+.
 npm install @tanstack/vue-store
 ```
 
-TanStack Store is compatible with Vue 2 and 3.
+TanStack Store is compatible with Vue 3.
 
 ## Angular
 

examples/react/atoms/package.json

@@ -9,7 +9,7 @@
     "test:types": "tsc"
   },
   "dependencies": {
-    "@tanstack/react-store": "^0.11.2",
+    "@tanstack/react-store": "^1.0.0-alpha.0",
     "react": "^19.2.5",
     "react-dom": "^19.2.5"
   },

examples/react/simple/package.json

@@ -9,7 +9,7 @@
     "test:types": "tsc"
   },
   "dependencies": {
-    "@tanstack/react-store": "^0.11.2",
+    "@tanstack/react-store": "^1.0.0-alpha.0",
     "react": "^19.2.5",
     "react-dom": "^19.2.5"
   },

examples/react/store-actions/package.json

@@ -9,7 +9,7 @@
     "test:types": "tsc"
   },
   "dependencies": {
-    "@tanstack/react-store": "^0.11.2",
+    "@tanstack/react-store": "^1.0.0-alpha.0",
     "react": "^19.2.5",
     "react-dom": "^19.2.5"
   },

examples/react/store-context/package.json

@@ -9,7 +9,7 @@
     "test:types": "tsc"
   },
   "dependencies": {
-    "@tanstack/react-store": "^0.11.2",
+    "@tanstack/react-store": "^1.0.0-alpha.0",
     "react": "^19.2.5",
     "react-dom": "^19.2.5"
   },

examples/react/stores/package.json

@@ -9,7 +9,7 @@
     "test:types": "tsc"
   },
   "dependencies": {
-    "@tanstack/react-store": "^0.11.2",
+    "@tanstack/react-store": "^1.0.0-alpha.0",
     "react": "^19.2.5",
     "react-dom": "^19.2.5"
   },

examples/vue/atoms/package.json

@@ -10,7 +10,7 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "@tanstack/vue-store": "^0.11.2",
+    "@tanstack/vue-store": "^1.0.0-alpha.0",
     "vue": "^3.5.32"
   },
   "devDependencies": {

examples/vue/simple/package.json

@@ -10,7 +10,7 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "@tanstack/vue-store": "^0.11.2",
+    "@tanstack/vue-store": "^1.0.0-alpha.0",
     "vue": "^3.5.32"
   },
   "devDependencies": {

examples/vue/store-actions/package.json

@@ -10,7 +10,7 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "@tanstack/vue-store": "^0.11.2",
+    "@tanstack/vue-store": "^1.0.0-alpha.0",
     "vue": "^3.5.32"
   },
   "devDependencies": {

examples/vue/store-context/package.json

@@ -10,7 +10,7 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "@tanstack/vue-store": "^0.11.2",
+    "@tanstack/vue-store": "^1.0.0-alpha.0",
     "vue": "^3.5.32"
   },
   "devDependencies": {

examples/vue/stores/package.json

@@ -10,7 +10,7 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "@tanstack/vue-store": "^0.11.2",
+    "@tanstack/vue-store": "^1.0.0-alpha.0",
     "vue": "^3.5.32"
   },
   "devDependencies": {

knip.json

@@ -1,11 +1,11 @@
 {
   "$schema": "https://unpkg.com/knip@5/schema.json",
   "workspaces": {
+    "packages/react-store": {
+      "entry": ["tests/fixtures/selector-retention.mts"]
+    },
     "packages/store": {
       "entry": ["src/signal.ts"]
-    },
-    "packages/vue-store": {
-      "ignoreDependencies": ["vue2", "vue2.7"]
     }
   },
   "ignoreWorkspaces": ["examples/**"]

packages/react-store/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @tanstack/react-store
 
+## 1.0.0-alpha.0
+
+### Major Changes
+
+- [#362](https://github.com/TanStack/store/pull/362) [`5567af4`](https://github.com/TanStack/store/commit/5567af42a4eee4b5befad3acd2f589d3f4deb5bd) - `@tanstack/react-store` now requires React 18 or newer (`peerDependencies` are `react` and `react-dom` `^18.0.0 || ^19.0.0`); support for React 16.8 and 17 has been dropped.
+
+  `useSelector` builds on React's built-in `useSyncExternalStore` with a single memoized selection ref instead of the `use-sync-external-store/shim/with-selector` helper: fewer hook slots and allocations per subscribed component, no per-component passive effect, and the `use-sync-external-store` dependency is gone from consumer bundles. The public API and selection semantics of `useSelector`, `useAtom`, `_useStore` and `useStore` are unchanged.
+
 ## 0.11.2
 
 ### Patch Changes

packages/react-store/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-store",
-  "version": "0.11.2",
+  "version": "1.0.0-alpha.0",
   "description": "Framework agnostic type-safe store w/ reactive framework adapters",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -29,6 +29,7 @@
     "test:types:ts59": "tsc",
     "test:lib": "vitest",
     "test:lib:dev": "pnpm run test:lib --watch",
+    "test:perf": "NODE_ENV=production vitest bench --run --coverage.enabled=false --typecheck.enabled=false",
     "test:build": "publint --strict",
     "build": "tsdown --tsconfig tsconfig.build.json"
   },
@@ -49,20 +50,18 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/store": "workspace:*",
-    "use-sync-external-store": "^1.6.0"
+    "@tanstack/store": "workspace:*"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@types/use-sync-external-store": "^1.5.0",
     "@vitejs/plugin-react": "^6.0.1",
     "react": "^19.2.5",
     "react-dom": "^19.2.5"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   }
 }

packages/react-store/src/useSelector.ts

@@ -1,25 +1,76 @@
-import { useCallback } from 'react'
-import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'
+import { useRef, useSyncExternalStore } from 'react'
 
 export interface UseSelectorOptions<TSelected> {
   compare?: (a: TSelected, b: TSelected) => boolean
 }
 
-type SyncExternalStoreSubscribe = Parameters<
-  typeof useSyncExternalStoreWithSelector
->[0]
-
 type SelectionSource<T> = {
   get: () => T
   subscribe: (listener: (value: T) => void) => {
     unsubscribe: () => void
   }
 }
 
+/**
+ * Per-component state, mutated in place. The inputs and the callbacks built
+ * for them are written during render; the selection is written by whichever
+ * `getSnapshot` closure computed it last and is keyed on that closure.
+ */
+type Instance<TSource, TSelected> = {
+  source?: SelectionSource<TSource>
+  selector?: (snapshot: TSource) => TSelected
+  compare?: (a: TSelected, b: TSelected) => boolean
+  subscribe?: (onStoreChange: () => void) => () => void
+  getSnapshot?: () => TSelected
+  // Private cache keys stay short because property names survive minification.
+  o: (() => TSelected) | null // selection owner
+  s?: TSource // snapshot
+  v?: TSelected // selected value
+}
+
+function identity<TSource, TSelected>(snapshot: TSource): TSelected {
+  return snapshot as unknown as TSelected
+}
+
 function defaultCompare<T>(a: T, b: T) {
   return a === b
 }
 
+// Keep snapshot inputs out of the subscription's closure scope. This also
+// avoids nesting the snapshot callback inside a render's conditional scope.
+function createGetSnapshot<TSource, TSelected>(
+  source: SelectionSource<TSource>,
+  selector: (snapshot: TSource) => TSelected,
+  compare: (a: TSelected, b: TSelected) => boolean,
+  instance: Instance<TSource, TSelected>,
+): () => TSelected {
+  const getSnapshot = () => {
+    const snapshot = source.get()
+
+    if (instance.o !== getSnapshot || instance.s !== snapshot) {
+      const selected = selector(snapshot)
+
+      // Keep the previous selection's identity when `compare` considers the
+      // new one equal so that `useSyncExternalStore` does not re-render the
+      // component. Like the former `use-sync-external-store/shim/with-selector`
+      // helper, this compares against the previous selection even when the
+      // selector identity changed: inline selectors are recreated on every
+      // render and must still return the same object when the selection is
+      // equal.
+      if (instance.o === null || !compare(instance.v as TSelected, selected)) {
+        instance.v = selected
+      }
+
+      instance.o = getSnapshot
+      instance.s = snapshot
+    }
+
+    return instance.v as TSelected
+  }
+
+  return getSnapshot
+}
+
 /**
  * Selects a slice of state from an atom or store and subscribes the component
  * to that selection.
@@ -42,26 +93,54 @@ function defaultCompare<T>(a: T, b: T) {
  */
 export function useSelector<TSource, TSelected = NoInfer<TSource>>(
   source: SelectionSource<TSource>,
-  selector: (snapshot: TSource) => TSelected = (s) => s as unknown as TSelected,
+  selector: (snapshot: TSource) => TSelected = identity,
   options?: UseSelectorOptions<TSelected>,
 ): TSelected {
   const compare = options?.compare ?? defaultCompare
 
-  const subscribe: SyncExternalStoreSubscribe = useCallback(
-    (handleStoreChange) => {
-      const { unsubscribe } = source.subscribe(handleStoreChange)
-      return unsubscribe
-    },
-    [source],
-  )
+  // One ref instead of `useCallback`s. `useSyncExternalStore` re-subscribes
+  // whenever `subscribe` changes identity and schedules a passive effect plus
+  // a consistency check whenever `getSnapshot` does, so both are only rebuilt
+  // when their inputs change. With a stable selector, a re-render that leaves
+  // the store untouched costs no allocations and no effects.
+  const instanceRef = useRef<Instance<TSource, TSelected> | null>(null)
+  const instance = instanceRef.current ?? (instanceRef.current = { o: null })
+  const sourceChanged = instance.source !== source
 
-  const getSnapshot = useCallback(() => source.get(), [source])
+  if (sourceChanged) {
+    instance.subscribe = (onStoreChange) => {
+      const subscription = source.subscribe(onStoreChange)
+
+      // Call `unsubscribe` on the subscription so sources that rely on `this`
+      // keep working.
+      return () => subscription.unsubscribe()
+    }
+  }
+
+  if (
+    sourceChanged ||
+    instance.selector !== selector ||
+    instance.compare !== compare
+  ) {
+    instance.source = source
+    instance.selector = selector
+    instance.compare = compare
+
+    // The closure captures its inputs instead of reading them from the
+    // instance so that a render which suspends with a different selector
+    // cannot change what the committed subscription selects. The selection is
+    // keyed on the closure for the same reason.
+    instance.getSnapshot = createGetSnapshot(
+      source,
+      selector,
+      compare,
+      instance,
+    )
+  }
 
-  return useSyncExternalStoreWithSelector(
-    subscribe,
-    getSnapshot,
-    getSnapshot,
-    selector,
-    compare,
+  return useSyncExternalStore(
+    instance.subscribe!,
+    instance.getSnapshot!,
+    instance.getSnapshot,
   )
 }