`useSelector` triggers `state_proxy_equality_mismatch` on every store update in svelte-store
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.
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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