CODEWITHSUNDEEP
sveltesvelte-3
Jawher
Jawher

Reputation: 7097

Trying to understand why changing a variable re-triggers reactive statements of unrelated variables

Context

Here's a simplified version of my context:

context I have a component which

What I have tried

Here's the flow in pseudo-javascript:

let bookmarks=[]

let xbookmarks=[]
$: xbookmarks = bookmarks.map(b=>{...b, domain: computeDomain(b)})

let filter = {domains: {}}
$: filter.domains=extractDomains(xbookmarks)

let filterdBookmarks=[]
$: filterBookmarks = xbookmarks.filter(using filter)

Here's a link to the svelte REPL with the complete code described above: https://svelte.dev/repl/d07ffc88e4a34cb797d2ceb6ba0ec6a4?version=3.49.0

Problem

When I try to uncheck one of the domains checkboxes:

Expected behaviour:

filter changed => trigger recomputation of depending variables, i.e. filterdBookmarks

Actual behaviour:

filter changed => Svelte recomputes xbookmarks, then filter.domains which resets it back to all domains being checked, then filterdBookmarks

I can't understand why Svelte considers that xbookmarks depends on filter

When I looked into the JS code generated by Svelte, this shouldn't be happening:

dependency graph

As can be seen in the screenshot above, the generated code matches my intuition about the dependencies:

  1. xbookmarks is recomputed when bookmarks changes
  2. filter.domains is recomputed when xbookmarks changes
  3. filteredBookmarks is recomputed when either of filter of xbookmarks changes

P.S.: I have just started learning and playing with Svelte

Upvotes: 3

Views: 239

Answers (1)

brunnerh
brunnerh

Reputation: 185140

This is probably a bug. The input_change_handler invalidates too many variables.

This worked in v.3.2.0, see also this related question and issue opened for it.

Upvotes: 3

Related Questions