TanStack / TanStack/store

`useSelector` triggers `state_proxy_equality_mismatch` on every store update in svelte-store

Open Beginner friendly
#322 2 comments 5 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
893
Forks
114
Avg merge
8d 14h
Merged PRs (30d)
3

Description

Describe the bug

In useSelector, slice is Proxied via $state, whereas the data resolved through selector(s) is not Proxied.

Because of this, the comparison performed by compare function (where defaultCompare is used) triggers Svelte's state_proxy_equality_mismatch warning. This causes the comparison to always return false, making this conditional branch a kind of dead code.

https://github.com/TanStack/store/blob/a378a51fa53af899dec1c146933d037a2811a86e/packages/svelte-store/src/useSelector.svelte.ts#L37-L50

Steps to Reproduce the Bug or Issue

It is easiest to try out @tanstack/svelte-table v9 alpha to understand it better.

Here is the demo in Svelte Playground.
https://svelte.dev/playground/6cb4726d28594a3a9781f8a785d331fe?version=latest

<script lang="ts">
  import { createTable, tableFeatures } from '@tanstack/svelte-table';

  const _features = tableFeatures({});
  let data = $state([{ id: 1 }]);
  const table = createTable({
    _features,
    _rowModels: {},
    get data() { return data; },
    columns: [{ accessorKey: 'id', header: 'ID' }],
  });
</script>

<button onclick={() => (data = [...data, { id: data.length + 1 }])}>Add</button>
{#each table.getRowModel().rows as row (row.id)}
  <div>{row.original.id}</div>
{/each}
Expected behavior

Fix this warning so the comparison works right.

Screenshots or Videos

No response

Platform
  • @tanstack/svelte-store@0.12.0
    • @tanstack/svelte-table@9.0.0-alpha.45
  • svelte@5.55.x
Additional context

It will probably be resolved just by changing slice variable $state to $state.raw.
This is because the slice reassigning the entire variable, so there seems to be no reason to make it a Proxy.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in packages/svelte-store/src/useSelector.svelte.ts at the cited comparison branch, then reproduce the warning with the linked Svelte Playground or the reported @tanstack/svelte-table setup. Check the interaction between slice, data, and defaultCompare; done means the state_proxy_equality_mismatch warning is gone and the comparison behaves correctly on store updates.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Active
Clarity
Clearly specified
Newbie friendliness
78/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.