0

Since I first got introduced to libraries/frameworks like Angular (v2) or Svelte, I have always wondered how they manage lists and list keys in iterative blocks (*ngFor="..." and {#each ...} ... {/each} respectively). How do they know which items to create, update, and delete? What kind of particular algorithm(s) is/are being used for list rendering? I've tried looking at Svelte compiled output in the each block example, but it is a bit hard to understand.

Note 1: Unless virtual DOM libraries use this kind of technique for rendering lists, I would prefer non-(p)react answers, please.

Note 2: I would prefer a general algorithm because I'm building a UI library from scratch (i.e. no dependencies) that interfaces directly with the DOM.

Update 1

To clarify, let's say that I have the following data on the first render:

[
    { key: 1, item: 'a', },
    { key: 2, item: 'b', },
    { key: 3, item: 'c', },
]

An update later, I get the following data:

[
    { key: 1, item: 'a', },
    { key: 3, item: 'd', },
    { key: 4, item: 'f', },
]

How can I tell some code that { key: 2, item: 'b', } was removed, { key: 3, item: 'c', } was updated to { key: 3, item: 'd', }, and { key: 4, item: 'f', } was added?

Ivan Rodriguez
  • 19
  • 3
  • Have you tried to do this yourself? Was there a problem? Note that your title and introductory paragraph point to questions too broad for SO. Your update looks to have the nugget of a real question, although perhaps you should also specify some sort of expected output. You might [edit] to focus on that. – Scott Sauyet Sep 27 '22 at 14:35
  • You might also look to [this answer](https://stackoverflow.com/a/33233053) or some of its links for suggestions. – Scott Sauyet Sep 27 '22 at 14:41
  • I've tried, but that's when I was reaching a road block and asked this question. – Ivan Rodriguez Sep 27 '22 at 21:10

0 Answers0