Add a unique id and use it as a key

Introduction

If you use Vue or React, you must know about keys. They are mostly used with lists such as

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

and in Vue:

<ul>
  <li v-for="todo in todos" :key="todo.id">
    {{ todo.text }}
  </li>
</ul>

Avoid using index as key

Both React and Vue advice against using the index as a key especially if the order of items may change. As if you want to allow users to reorder items.

// not recommended to use index as key
<ul>
  <li v-for="(todo, index) in todos" :key="index">
    {{ todo.text }}
  </li>
</ul>

Sometimes we are lucky enough that our data comes with a unique id that identifies each of the items.

Other times, we are not so lucky. The items don't have unique ids. Or they do, but we want to render the item more than once. In that case, if we use the id as a key, we will run into duplicate keys issue.

We will have to create unique ids for the items and use them as keys.

Generate keys

There are many ways to do that. I will choose Lodash's uniqueId method since Lodash is used in the project I am working on and there is no need to load another library

import uniqueId from 'lodash/uniqueId';

Before rendering todos, loop through it and add a uniquekey

todos.forEach((todo) => {
  todo.uniqueKey = uniqueId();
});

Then, you can use todo.uniqueKey as a key. uniqueId() will generate a unique id for each todo. However, sometimes those ids might clash with other ids for a different list in the page. We can take it further and add an argument to uniqueId('todo_') to avoid duplicate keys.

Final thoughts

This uniqueKey was only added to do a particular job in the frontend. We probably wouldn't need to send it to the backend. So, before sending todos to the backend, make sure to delete the uniqueKey

todos.forEach((todo) => {
  todo.uniqueKey && delete todo.uniqueKey;
});

Thanks for reading