CODEWITHSUNDEEP
svelte
xrd
xrd

Reputation: 4069

What is the right way to create and iterate over a largish Svelte store with many nested objects inside it?

To be more clear, structure that looks like this (p: "parent", c: "child", g: "grandchild", n: "name");

const top = writable(

[{ n: 'a', c: [ { n: 'j', g: [ { n: '1' }, { n: '2' }] }, { n: 'k' }, { n: 'l'}] }, 

{ n: 'b', c: [ { n: 'q' }, { n: 'r', g: [ { n: '1' }, { n: '2' }]  }, { n: 's'}] }}, 

{ n: 'c', c: [ { n: 'x' }, { n: 'y' }, { n: 'z', g: [ { n: '1' }, { n: '2' }] }] });

The point is that any of the top level objects could go two levels deep.

Then, I'll get a network event and need to update one of these parents and add or remove grandchildren inside an arbitrary child. Code would be something like this, iterating inside children to add grandparents where appropriate.

(event would come in with payload like ( { parent: 'b', child: 'y', grandchild: 'foo' }) )

onNetworkEvent( ({ parent, child, grandchild }) => {
top.update( t => {
const updated = [];

t.forEach( p => {
  let found = false;
  let updatedItem = undefined;
  if (p.n === parent) {
    p.forEach( c => {
      if (c.n === child) {
        c.forEach( g => {
          // just assume it is a new one, no need to replace
          updatedItem = [...g, { n: grandchild }];
        });
      }
    });
  } 
  if (!found) {
    updated.push(p);
  } else {
    updated.push(updatedItem);
  }
});
});

return updated;
});

Is it bad style to keep a top level component, and then when a new grandchild modification comes in, iterate over the parents, find the child, look inside that, then alter the grandchild array?

Probably not ever have more than a few dozen total grandchildren.

Rendering the items with something like this:

<div class="parent">
{#each $top as p}
<div class="child">
{#each p as g}
<div>{g.n}</div>
{/each}
</div>
{/each}
</div>

Does it matter than I will be resetting the entire writable and then re-rendering all of the children and grandchildren?

Or, is Svelte smart enough to know that certain things are kept intact and only update the DOM in that one place?

Upvotes: 0

Views: 57

Answers (1)

Bob Fanger
Bob Fanger

Reputation: 29917

Does it matter than I will be resetting the entire writable and then re-rendering all of the children and grandchildren?

Svelte doesn't "re-render" it reacts to changes.
That said, it does matter as Svelte will need to do a lot of checking to see what was changed.

This might sound bad, but javascript is really fast.
(React does a lot of this type of checking in its reconciliation phase)
Measure the performance to see if optimizing is even needed.

Or, is Svelte smart enough to know that certain things are kept intact and only update the DOM in that one place?

Yes, Svelte is smart, but it has its limits. If the data contains unique ids or can be augmented with ids, use these as keys to your #each blocks.

This helps the performance and prevents bugs with local state per row.

Upvotes: 2

Related Questions