What do you mean by React Keys? | React Keys | React Tutorial

React Keys | React Tutorial

In react, Keys play an important role, So it attracts many developer's attention.  Keys are very useful when developers work with the dynamically created component. A key is a unique identifier. Keys are used to identifying which items have changed, updated, or deleted from the Lists. It is helpful to determine which components in a collection need to be re-rendered instead of re-rendering the entire set of components every time.

If the code contains repetitive time which we need to do again and again for various arrays of data, in that case, keys will be very helpful. It saves us from lengthy HTML code by creating the same components with passing unique keys. In this way, you will be able to design a well perform react component, because only the required components are getting renders. 

And the Keys should be given inside the array to give the elements a stable identity. The better way to pick a key is a string that uniquely identifies the items in the list. It is shown in the below example.

Example

const stringLists = [ 'Pramod', 'Ayush', 'Kavita', 'Damru', 'Aliya' ];  
    
const updatedLists = stringLists.map((strList)=>{   
    <li key={strList.id}> {strList} </li>;   
});   

Using Keys with component
Now we will have a practical understanding of dynamically creating Content elements with a unique index, that will give a unique id for every data element

Example: 

const stringLists = [ 'Pramod', 'Ayush', 'Kavita', 'Damru', 'Aliya' ];   
    
const updatedLists = stringLists.map((strList, index)=>{   
    <li key={index}> {strList} </li>;   
});  

one more example for a better understanding of dynamically creating Content elements with a unique index(i), that will give a unique id for every data element. It will print three elements from our entered data.

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
		
      this.state = {
         data:[
            {
               component: 'Code',
               id: 1
            },
            {
               component: 'Eat',
               id: 2
            },
            {
               component: 'Sleep',
               id: 3
            },
            {
               component: 'Repeat......',
               id: 4
            }
         ]
      }
   }
   render() {
      return (
         <div>
            <div>
               {this.state.data.map((dynamicComponent, i) => <Content 
                  key = {i} componentData = {dynamicComponent}/>)}
            </div>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <div>{this.props.componentData.component}</div>
            <div>{this.props.componentData.id}</div>
         </div>
      );
   }
}
export default App;

In the below-given example, the list is rendered successfully. 

Output

import React from 'react';   
import ReactDOM from 'react-dom';   
  
function ListItem(props) {  
  const item = props.item;  
  return (  
    // No need to specify the key here.  
    <li> {item} </li>  
  );  
}  
function NameList(props) {  
  const myLists = props.myLists;  
  const listItems = myLists.map((strLists) =>  
    // The key should have been specified here.  
    <ListItem key={myLists.toString()} item={strLists} />  
  );  
  return (  
    <div>  
        <h2>Correct Key Usage Example</h2>  
            <ol>{listItems}</ol>  
    </div>  
  );  
}  
const myLists =   [ 'Pramod', 'Ayush', 'Kavita', 'Damru', 'Aliya' ];  
ReactDOM.render(  
  <NameList myLists={myLists}/>,  
  document.getElementById('app')  
);  
export default App;