React Keys

A key is a unique identifier. In React, it is used to identify which items have changed, updated, or deleted from the overall Lists. It is useful when we dynamically created react components or when the users alter the lists. It also helps to determine which react components in a collection need to be re-rendered instead of re-rendering the entire set of react components every time.

React Keys should be given inside the array([]) to give the elements a stable identity. The best way to pick a key is a string that uniquely identifies the items in the list.

Using Keys with Components:

Consider a situation where you have created a separate react component for list items and you are extracting the list of items from that react component. In that case, you will have to assign keys to the react component you are returning from the iterator and not to the list of items. That is you should assign keys to and not to A good practice to avoid mistakes is to keep in mind that anything you are returning from inside of the map() function is needed to be assigned a key.

incorrect usage of keys:

Example:

import React from 'react';
import ReactDOM from 'react-dom';

// Component to be extracted
function MenuItems(props)
{
       const item = props.item;

              return(
                     <li>
                         {item}
                     </li>
              );
}

// Component that will return an
// unordered list
function Navmenu(props)
{
             const list = props.menuitems;
      const updatedList = list.map((listItems)=>{
                   return (
            );
      });
      return(
             <ul>{updatedList}</ul>);
}
const menuItems = [1, 2, 3, 4, 5];
ReactDOM.render(
      ,document.getElementById('root')
);

OUTPUT:

correct usage of keys:

import React from 'react';
import ReactDOM from 'react-dom';

// Component to be extracted
function MenuItems(props)
{
       const item = props.item;
              return(
                     <li>
                         {item}
                     </li>
       );
}

// Component that will return an
// unordered list
function Navmenu(props)
{
             const list = props.menuitems;
      const updatedList = list.map((listItems)=>{
                   return (

             );
      });
      return(
              <ul>{updatedList}</ul>);
}
const menuItems = [1, 2, 3, 4, 5];
ReactDOM.render(
      ,document.getElementById('root')
);

Uniqueness of Keys:

We had discussed that react keys assignment in arrays must be unique among their siblings. However, it doesn’t mean that the react keys should be globally unique. We can use the same set of react keys in producing two different arrays.

import React from 'react';
import ReactDOM from 'react-dom';

// Component to be extracted
function MenuItems(props)
{
       const item = props.item;
              return(
                     <li>
                         {item}
                     </li>
              );
}
// Component that will return an
// unordered list
function Navmenu(props)
{
             const list = props.menuitems;
      const updatedList = list.map((listItems)=>{
                   return (
             );
      });
      return(
             <ul>{updatedList}</ul>);
      }
       const menuItems1 = [1, 2, 3, 4, 5];
       const menuItems2 = [1, 2, 3, 4, 5, 6];

       ReactDOM.render(
             <div>

             </div>,
             document.getElementById('root')
);