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.