ReactJS Tutorial - 19 - Index as Key Anti-pattern

📱 Follow Codevolution

[tiagobordin]

Showing what not to do is as important as showing what to do. You are an absolute legend.

[ahjiba]

For those who are still confused see the below example

You have abcd array of letters which map to 0123 indices -> react shows us key0 a, key1 b, key2 c, etc
You take out the second letter (b) through the array, acd which maps to 012. React shows key0 a, key1 c, key2 d
What we wanted to see is key0 a, key2c, key3 d

[sdaiwepm]

Thank you for speaking slowly and clearly so that we can follow every word!

[Prashant]

eagerly waiting for new videos :) you are just a coding superstar. Your videos are really helping me a lot in my career right now. Totally dependent on your videos.

[nouru]

I literally solved a big issue I had. Thanks to this vid.

[Pradeep-eque]

Very nice explanation. Waiting for other topics. Please do some on redux and react router also. awesome work👍👍.

[toannew]

1:55 case: we do not have ID to make keys for a list
3:52 pass index as keys
6:00 issue scenario with index
7:00 -9:05 index as key anti-pattern
9:20 when to use the index as keys
10:10 solution

[IAMTHEMUSK]

You are my new favorite youtuber. I even spend my evenings listening to you 🤣

[poojakamble]

only because if you i have managed to crack my React js interview thanks a ton looking forward for more videos on react native

[igorswies]

thank you now I understand that you can use index as key as long as the elements of the array don't move

[rameshbuvi]

Your teaching is the best bro, when compare with other tutorials...Thanks Bro

[huanshao]

Vishwas, you are the best reactjs teacher!

[hitanshimehta]

Thank you so much for making the video!! you are helping across the world! Thanks again!

[govindsharma]

🗝 The "key" prop in React is essential for rendering lists efficiently. It should have a unique value within the list.

🗝 The "key" prop value can be any unique identifier within the list, such as ID or name, but it should not be accessed or used in child components.

🔄 React uses keys to efficiently update the UI when items are added, removed, or changed within a list.

🗝 If your data doesn't have a unique identifier, you can use index as the key, but it's less efficient and should be a last resort.

[mirzafaisalbaigfaisal]

just amazing course!! Why didnt i found thiscourse early.🤦‍♂🤦‍♂

[asifurrahman]

Awesome explanation.
BTW you guys can use shortid npm package for unique id.

[ucngoctran]

best explanation for me. Thank you so much!

[gousmanyari]

Nice Explanation Sir...I love Your Video...

[AAKSHAS]

2:44 arrow function was passed to map method, then arrow function receives a 2nd param which is the index of the element in current iteration.

[leangsengkao]

Thank you so much for sharing. I'm really appreciated your tutorial.