fix(svelte-store): use $state.raw in useSelector to prevent proxy equality mismatch

Closes #322

Author: seongwon030

.changeset/fix-svelte-store-proxy-equality.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/svelte-store': patch
+---
+
+Fix `state_proxy_equality_mismatch` warning in `useSelector` by using `$state.raw()` instead of `$state()` for the slice variable. `$state()` wrapped object values in a Svelte Proxy, causing `===` comparison with the raw selector output to always fail, which triggered unnecessary re-renders and Svelte runtime warnings on every store update.

packages/svelte-store/src/useSelector.svelte.ts

@@ -35,7 +35,7 @@ export function useSelector<TState, TSelected = NoInfer<TState>>(
   options: UseSelectorOptions<TSelected> = {},
 ): { readonly current: TSelected } {
   const compare = options.compare ?? defaultCompare
-  let slice = $state(selector(source.get()))
+  let slice = $state.raw(selector(source.get()))
 
   $effect(() => {
     const unsub = source.subscribe((s) => {

packages/svelte-store/tests/ProxyEquality.test.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { untrack } from 'svelte'
+  import { createStore } from '@tanstack/store'
+  import { useSelector } from '../src/index.svelte.js'
+
+  const store = createStore({
+    selected: { value: 1 },
+    ignored: 0,
+  })
+
+  const selected = useSelector(store, (state) => state.selected)
+
+  let renderCount = $state(0)
+
+  $effect(() => {
+    selected.current
+    untrack(() => {
+      renderCount++
+    })
+  })
+</script>
+
+<div>
+  <p>Number rendered: {renderCount}</p>
+  <p>Value: {selected.current.value}</p>
+  <button
+    onclick={() =>
+      store.setState((v) => ({
+        ...v,
+        ignored: v.ignored + 1,
+      }))}
+  >
+    Update ignored
+  </button>
+</div>

packages/svelte-store/tests/index.test.ts

@@ -5,6 +5,7 @@ import { shallow } from '../src/index.svelte.js'
 import TestBaseStore from './BaseStore.test.svelte'
 import TestRerender from './Render.test.svelte'
 import TestValue from './Value.test.svelte'
+import TestProxyEquality from './ProxyEquality.test.svelte'
 
 const user = userEvent.setup()
 
@@ -28,6 +29,14 @@ describe('useSelector', () => {
     expect(getByText('Number rendered: 2')).toBeInTheDocument()
   })
 
+  it('does not trigger re-render when selector returns same object reference', async () => {
+    const { getByText } = render(TestProxyEquality)
+    expect(getByText('Number rendered: 1')).toBeInTheDocument()
+
+    await user.click(getByText('Update ignored'))
+    expect(getByText('Number rendered: 1')).toBeInTheDocument()
+  })
+
   it('useSelector reads writable and readonly store state', async () => {
     const { getByText } = render(TestValue)
     expect(getByText('Value: 1')).toBeInTheDocument()