Should I always use key property whenever I use map() function in React?-CodePudding

I dont understand why i should you key property.

{data.map((dataInfo, index) => (
        <div key={index}>
          <h1>{dataInfo.chapter}</h1>
          <LessonGrid data={dataInfo} />
        </div>
      ))}

CodePudding user response：

First of all, you should know that there is an internal DOM (Virtual-DOM) which react maintains. Then once you make some changes react won't update the real dom immediately, the react-DOM will compare the current result with the previous result (which is known as diffing) and then only pass the changes to the real DOM. Virtual DOM is a virtual representation of the real DOM.

Yes, you should always use key every time you use a map,

So let's say you have an array of div's that you want to render

<div>Sam</div>
<div>Mike</div>

Now let's say you want to add a name at the last, then your dom structure will look something like this

<div>Sam</div>
<div>Mike</div>
<div>Jason</div>

Now Virtual-DOM will compare the current result with the previous result and will figure out a div has been added to the last, so it will push that div to the real-DOM and changes will be reflected

Now let's say you want to add a div in the starting rather than at the last like this,

<div>Jason</div>
<div>Sam</div>
<div>Mike</div>

Now Virtual-DOM will again compare these changes line by line like this,

//Previous result              //Current result

<div>Sam</div>   <-Changed->   <div>Jason</div>
<div>Mike</div>  <-Changed->   <div>Sam</div> 
                 <-Added->     <div>Mike</div>

So now Virtual-DOM will compare the results and it will figure out that each div has changed, So it will push the whole array to the real-DOM instead of only one div that has been pushed to the top.

Note This is where the key comes into the picture.

//Previous result              //Current result

<div key={1ab}>Sam</div>       <div key={3ab}>Jason</div>
<div key={2ab}>Mike</div>      <div key={1ab}>Sam</div> 
                               <div key={2ab}>Mike</div>

Now react will Compare the results using keys and it'll figure out that only one div has been added to the top, so instead of pushing the whole array of div's to the real-DOM it will only push only one.

Recap

Frequent DOM manipulations are expensive and performance heavy.
Virtual DOM is a virtual representation of the real DOM.
When state changes occur, the virtual DOM is updated and the previous and current version of virtual DOM is compared. This is called “diffing”.
The virtual DOM then sends a batch update to the real DOM to update the UI.
React uses virtual DOM to enhance its performance.

CodePudding user response：

From the docs:

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity

Consider that you're adding a list item to the beginning of a list with two items. f you're not using keys, react won't know that two elements are the same. It'll have to mutate all three items. If the items have a key, react will know that the two old items are the same, and it just has to move the two items and mutate only one item. You can read this to get a better explanation

You want it to be unique in a given list, not globally unique, just unique among its siblings.

Also, using the index as the key is generally a bad idea. The ideal key is the id or the primary key in your DB. You can also generate a hash from your data.

CodePudding user response：

Everyone knows that React is faster because it uses Virtual DOM in addition to that of the actual browser DOM. This is the most important feature of React and which makes the browser work faster by updating only the changed elements without repainting the entire page. This process is called diffing. So to identify which element is changed and to achieve Diffing process a key should be provided to each and every element of an array.

Without providing a key doesn't create huge problems with rendering but it makes a mild difference in the performance of the code.

This article can help you https://medium.com/devinder/react-virtual-dom-vs-real-dom-23749ff7adc9

Finally

Need high performance and need to use the advantages of Virtual DOM -use keys. If not, don't use keys and just avoid the warning lol!!!!

CodePudding user response：

The main purpose of keys is to help React differentiate and distinguish elements from each other, increasing its performance when diffing between the virtual and real DOM. To use keys, simply add the prop inside an element such as a list item

3 second google search, first result.