How key helps to gain performance in UI framework

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.",
},
]
<Todo :for(task in tasks) @remove="removeTask" class="mt-20px" :task="task" />
this.tasks.splice(index,1);
  1. Removes the elements from specified index
  2. Reorder the array to update the index of each item.
  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.

Key as rescue

<Todo :for(task,index in tasks) :key="task.title" @remove="removeTask" class="mt-20px" :task="task" />
if(oldEl.key != newEl.key){    // replace old element with new Element
}
  1. Github - https://github.com/ujjwalguptaofficial
  2. LinkedIn - https://www.linkedin.com/in/ujjwalkrgupta/
  3. Twitter - https://twitter.com/ujjwal_kr_gupta

--

--

--

Creator of jsstore, sqlweb, fortjs

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to use the VGG16 neural network and MobileNet with TensorFlow.js

GraphQL Code Generator — Introducing Hooks support for React Apollo

Classifying Images using TensorFlow.js & Keras

TypeScript is superior to JavaScript

How to setup Webpack +2.0 from scratch in 2017 — Part II

Developing a Research Project Management Tool With MERN

ES5 => ES6…A must-read if you wanna be a slayer😎 in JavaScript ES6

Understanding why React developers may dislike Redux

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ujjwal Gupta

Ujjwal Gupta

Creator of jsstore, sqlweb, fortjs

More from Medium

Get Started with Vite.

Creating a Read Progress Bar in React and TailwindCSS

Painless development setup for React using Parcel (Part 1)

How to create a new component in svelte using a template — svelte component scaffolding and…