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

Lists and Keys - React

Hopefully this is helpful.

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