React Keys

React Keys

A key can be defined as a unique identifier. In React, it is used for identifying the items that have changed, deleted, and updated from the lists. React Keys are helpful when working with the dynamically created components or whenever the users updated the list. It helps to determine the components in a collection that requires to be re-rendered rather than to re-render the entire set of components every time.

Keys should be in the array for providing a stable identity to elements.

Example:

const num = [ 1,2,3,4]; 
const updatedNum = num.map((number)=>{ 
 {number} 
; 
}); 

If there is no stable ID for rendered items, then you can assign the indexes of the array as a key to the list items. It can be clear in the following example:

Example:

const num = [ 1,2,3,4]; 
const updatedNum = num.map((number, index)=>{ 
 {number} 
; 
}); 

It is highly dissatisfied to assign array indexes as keys because it can be possible that array elements can be reordered in the future. And if the order of the element gets changed, then their key will also change; that's why it will be confusing for a developer. It also creates issues with the state of the component.

Using Keys with Components

Consider a case in which you create a separate component for the list items, and you are extracting the items of the list from that component. In this case, you have to assign the keys to that component in which you are returning from the iterator instead of assigning them to the list items. That means you have to assign keys to <component/> instead of <li>. It is to keep in mind that anything in which you are returning from inside of the map() function, you need to assign a key.                                                                                                                                   

Example:

Incorrect Key Usage

import React from 'react'; 
 import ReactDOM from 'react-dom'; 
 function List(props) { 
  const item = props.item; 
  return ( 
  // Wrong format for specifying the key here. 
  
 
  {item} 
  
  
  ); 
 } 
 function Name(props) { 
  const myLists = props.myLists; 
  const items = myLists.map((strLists) => 
  // The key should have been specified here. 
   
  );  
  return ( 
  
 
  
Incorrect Key Usage Example
 
  
{items}
 
  
 
  ); 
 }  
 const myLists = ['Peter', 'Sachin', 'Kevin', 'Dhoni', 'Alisa']; 
 ReactDOM.render( 
  , 
  document.getElementById('app') 
 ); 
 export default App;  

Output:

Example:

Correct Key Usage

For correcting the above code, we have to assign a key to the map() iterator.

import React from 'react'; 
 import ReactDOM from 'react-dom'; 
 function List(props) { 
  const item = props.item; 
  return ( 
  //Should not specify the key here.
  
 {item} 
 
  );  
 } 
 function Name(props) { 
  const myLists = props.myLists; 
  const listItems = myLists.map((strLists) => 
  // The key should have been specified here. 
   
  );  
  return ( 
  
 
  
Correct Key Usage Example
 
  
{listItems}
 
  
 
  ); 
 }  
 const myLists = ['Peter', 'Sachin', 'Kevin', 'Dhoni', 'Alisa']; 
 ReactDOM.render( 
  , 
  document.getElementById('app') 
 ); 
 export default App;  

Output:

There is an example that shows the dynamic creation of Content elements having a unique index (id) are given below. The Key value should be unique for every element, so we are assigning id as a key for each element that is created.

Example:

import React from 'react';
 class App extends React.Component {
  constructor() {
  super();
  this.state = {
  item:[
  {
  listItem: 'Akash', 
  id: 1
  },
  {
  listItem: 'Aman',
  id: 2
  },
  { 
  listItem: 'Anup',
  id: 3
  }
  ]
  }
  }
  render() { 
  return (
  

  

  {this.state.item.map((dynamicComponent, id)=> )}
  
  
  ); 
  }
 }
 class Example extends React.Component {
  render() {
  return (
  

  
Name={this.props.componentData.listItem}
 
  
id={this.props.componentData.id}
  
  
  );
  }
 }
 export default App; 

Output:

It is to be noted that Keys are not like as props, only the way of assigning the key to a component is similar to props. Keys are internal to React, and they cannot be accessible from inside the component like props.