List and Keys in React

Photo by Richard Payette on Unsplash

Lists are very common in application development. Rendering List is not a hard part part do it in a correct manner needs some more knowledge about lists.

Following is the way of implementing a list.

import React, { Component } from "react";class List extends Component {
students = [
{ id: 1, name: "Amal", age: 25 },
{ id: 2, name: "Mark", age: 32 },
{ id: 3, name: "Sithum", age: 28 },
{ id: 4, name: "Tony", age: 30 }
];
studentList = this.students.map(student => (
<Student name={student.name} age={student.age} />
));

render() {
return <div>{this.studentList}</div>;
}
}
const Student = props => {
return (
<div>
<h6>
{props.name} is {props.age} years old
</h6>
</div>
);
};
export default List;

In the above code the student list is rendered as follows.

Cool then what is this keys? Is it needed. Yes that is the performance optimisation part for lists.

Importance of Keys

Keys are used to uniquely identify elements in a list and it helps react to identify what is added, updated and changed. Apart from that it helps react to efficiently update the DOM.

Wait! Wait! How?

Okay Let’s get a list before update and after update.

In the above case react will verify that the first and second elements are not changed and add only last element to the list. But let’s consider the following scenario.

In the above case react cannot identify that “Kamal” and “Namal” are not changed hence it will update three element instead one which will lead to performance waste. To solve this keys are used.

Keys must be unique.

Using the keys react identify the elements and figure which to add, remove or update which will enhance the performance as well.

Let’s go to coding.

import React, { Component } from "react";class List extends Component {
students = [
{ id: 1, name: "Amal", age: 25 },
{ id: 2, name: "Mark", age: 32 },
{ id: 3, name: "Sithum", age: 28 },
{ id: 4, name: "Tony", age: 30 }
];
studentList = this.students.map(student => (
<Student key={student.id}
name={student.name}
age={student.age} />
));

render() {
return <div>{this.studentList}</div>;
}
}
const Student = props => {
return (
<div>
<h6>
{props.name} is {props.age} years old
</h6>
</div>
);
};
export default List;

Why we are not using indexes as follows for keys.

If we use index as a key then if the array is changed then the keys are changed without changing the values then again react update all the elements.

import React, { Component } from "react";class List extends Component {
students = [
{ id: 1, name: "Amal", age: 25 },
{ id: 2, name: "Mark", age: 32 },
{ id: 3, name: "Sithum", age: 28 },
{ id: 4, name: "Tony", age: 30 }
];
studentList = this.students.map((student, index) => (
<Student key={index}
name={student.name}
age={student.age} />
));

render() {
return <div>{this.studentList}</div>;
}
}
const Student = props => {
return (
<div>
<h6>
{props.name} is {props.age} years old
</h6>
</div>
);
};
export default List;

Hence do not use indexes as keys.

References

Hopefully this is helpful.

If you have found this helpful please hit that 👏 and share it on social media :).

--

--

--

Technical Writer | Tech Enthusiast | Open source contributor

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

Recommended from Medium

Creating a List of names

Zip files in React

Introduction to Angular JS part -1

You learned the basics of React, now what?

Build a “Send Me a Message” Component for Your Site

One Year Of Design — In Colors

ReactJS AWS s3 bucket file upload

Easy caching with Rxjs

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
Yashod Perera

Yashod Perera

Technical Writer | Tech Enthusiast | Open source contributor

More from Medium

Creating a PWA Using React and Adding Manual Controls to Update Service Worker

How to make columns persistent — Material-UI DataGrid

HashRouter vs BrowserRouter

React Context API: Getting Started