How key helps to gain performance in UI framework

if you have used a javascript framework like react or vue. You must have come across a term key while doing a loop.

Most of the frameworks says- it is recommended to use key to have more performance.

But question is why ? How does it helps ? what’s happening internally ?

In this article- I will describe with some example, how key is used and how it helps us to achieve better performance.

Let’s consider list of tasks which are stored in array.

var tasks = [
  {
    title: "Plan a holiday",
    description: "Check with travel companies for himachal pradesh    cost and iternaries.",
},
  {
    title: "Learn mahal framework",
    description: "Learn new mahal framework and add it in my resume",
  },
  {
    title: "Buy vegetables",
    description: "Buy vegetables in evening",
  },
  {
    title: "yoga time",
    description: "Do 15 min of yoga after logging out for day.",
  },
]

In order to render this list, we need to use a loop . This is how a for implementation will be in mahal framework.

<Todo :for(task in tasks) @remove="removeTask" class="mt-20px" :task="task" />

So far we have not used key, and everything is OK.

now, let’s try to remove a task. Consider we removed third task- “Buy vegetables”.

In order to remove a task- we need to use splice method on our tasks variable.

> This implementation can be different in others framework. But let’s try to understand the logical part.

this.tasks.splice(index,1);

splice method does two operation -

1. Removes the elements from specified index
2. Reorder the array to update the index of each item.

In our case, third task was removed and two task was updated below it.

In case of DOM, equivalent operation will be done -

1. Remove the elements from dom
2. Replaced affected existing node with new node. i.e. replace “yoga time” and “buy shoe” with new element.

but reordering the array items was not needed in DOM operations, since no update of index is required as we are not using index in UI logic anywhere.

Doing reordering in DOM is very costly, as it involves updating each affected row. And your real application can have thousands of data in an array.

Consider another case- where we are showing index of each item in UI.

here, when doing splice operation, we need to also do reordering in DOM as array index need to be updated in UI. Thus this is OK.

But framework doesn’t know when you are using index in your UI and when you are not. So it will always do reordering.

So if there is a way where you can tell, i am not using index. This item has no change, so do not update this one - then we can avoid extra reordering task.

Key as rescue

The key is used for this purpose, by using key - framework compares between new items and old items and if keys are same then that row is not updated.

Let’s understand in more details -

<Todo :for(task,index in tasks) :key="task.title" @remove="removeTask" class="mt-20px" :task="task" />

In the above code we are using title as key, considering title will be always unique.

Let’s remove the same items again -

now this time, when splice operation will be performed - framework will get the old node, new Node and then compare.

if(oldEl.key != newEl.key){
    // replace old element with new Element
}

it only replace the old node with new node, if keys are different.

So we avoided these reordering with help of keying.

You can also use index as key, but at that time- since each key will be different , each affected existing element will be replaced and that’s why all framework tell you not to use index as key.

splice is just one case, but there are others place also where key is used for performance.

I hope this article was beneficial for you and you were able to understand it. If you liked - please do a clap for me :).

Follow me on different channels -

1. Github - https://github.com/ujjwalguptaofficial
2. LinkedIn - https://www.linkedin.com/in/ujjwalkrgupta/
3. Twitter - https://twitter.com/ujjwal_kr_gupta