How does a non-keyed implementation differ from keys in javascript frameworks?

Often, when developing websites using frameworks, little attention is paid to the details that are included in this framework. And this is normal, because the main task of the framework is to make it convenient to create a website and to make it fast and functional. But these details are interesting because, having learned some points, the view of JavaScript development is slightly supplemented.

One such detail is the keyed implementation. What it is?

Keyed implementation is first of all creating an association between the data and the DOM node. That is, when the data changes, thanks to this implementation, the DOM nodes themselves change. Non-keyed is thus not entirely related to the DOM node.

Most frameworks today have a special design that repeats DOM nodes depending on the data. Let’s say in a framework like Cample.js this construct (keyed) is the each:

const tableRows = each(
  "rows-component",
  ({ importedData }) => importedData.data,
  `<tr key={{index}}>
    <td>{{value}}</td>
   </tr>
  `,
  {
    import: {
      value: [],
      exportId: "mainExport",
    },
  }
);

For example, there will be such a construction:

<div><input type="text"/>val1</div>
<div><input type="text"/>val2</div>
<div><input type="text"/>val3</div>

So, what will happen if new data arrives in the non-keyed implementation, where there will be an array, but not with three elements, but with two? And also, if some data is entered into the input, what will happen there when two elements arrive in this loop construction?

<div><input value="1" type="text"/>val1</div>
<div><input value="2" type="text"/>val2</div>
<div><input value="3" type="text"/>

The result will be something like this if the data looks like this:

const data = ["val1", "val3"];

The HTML itself will look like this if you also enter some data into the input:

<div><input value="1" type="text"/>val1</div>
<div><input value="2" type="text"/>val3</div>

That is, it is clear that in a non-keyed implementation, information in DOM nodes is not stored in the same way as it would be in a keyed implementation, because there is no association due to the key.

Thus, two data arrays are compared, where there used to be 3 elements, but now there are 2, which means the data has decreased by 1 unit, and then the last block in the DOM must be deleted, because there is no association with the key. If there was an association, the code would look like this:

<div><input value="1" type="text"/>val1</div>
<div><input value="3" type="text"/>

This can be compared with id when creating a database, when, for example, there would be no id, then rows would be deleted not by id, but by the difference between old data and new data.

Of course, this is one of the small examples of what features javascript frameworks have, but it’s probably all the more interesting to work with them and create websites thanks to them.

I hope you found this article interesting. Thank you very much for reading!

Links:
https://camplejs.github.io/documentation/each.html
https://github.com/Camplejs/Cample.js