Skip to content

useSelector triggers state_proxy_equality_mismatch on every store update in svelte-store #322

@NEKOYASAN

Description

@NEKOYASAN

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.

const compare = options.compare ?? defaultCompare
let slice = $state(selector(source.get()))
$effect(() => {
const unsub = source.subscribe((s) => {
const data = selector(s)
if (compare(slice, data)) {
return
}
slice = data
}).unsubscribe
return unsub
})

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions