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
Top comments (2)
Unless you can make use of tree-shaking, you should use a dedicated package instead of lodash, because otherwise all of lodash is going to be included in your package.
Correct,
can probably 'cherry pick' the method
npm i --save lodash.uniqueid
and import it in the file as so
import uniqueId from 'lodash.uniqueid'
The main reason I went with lodash because it might already be used in the project, if it is not, I agree with you on using a dedicated package
Thanks for reading and for your comment