ReactJS Tutorial - 19 - Index as Key Anti-pattern 

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

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

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

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.

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

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

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

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

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

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

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

Thanks man. Your videos and your way of explaining very cool.

best explanation for me. Thank you so much!

Vishwas, you are the best reactjs teacher!

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

Awesome tutorial , thank you!

Wow, You explained it so well, Thank You!

Great tutorial,best explanation,thank you

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

completed video 19. Thanks 🙂

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

Great tutorial !!! Thx !!!

🗝 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.

Thank you. You are a true champ indeed.

Great tutorial, I Love you ~~

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

the best course ever

Thank you once again!

awesome explanation 🙏

Thankyou for the video :)

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

Thank you so much.

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.

good explanation, thanks

Very Helpful Video

Wonderful! Wonderful! Wonderful!

Thanks dude!

Thank you

Thank you.

thankyou sir....

What is the use of three periods before todo and before the array of list while adding new element

Can I just map a new array list and insert an id value for each object in the list? Sorry if it's a dumb question I'm just a beginner.

Thankyou sir

3:02 made me smile....ye bhi karr sakte😀😀

Why do the id and timestamp values still maintain the correct placement? - what links them that doesn't link the inputted value

Loved your way of teaching. Would you be kind enough to mention which extension you are using to uncollapse the code with plus (+) sign (like a region/section in C#) at 0:51 please?

Hello Vishwas. I love the way you teach very clearly! Thanks for the videos. Can we use hash of the list element as a key?

7:00 index as key anti-pattern

Hi sir. In this case, I can understand Key is not changed. But will that be an issue as 'Key' prop is used by React alone right and anyways we will not able to use that prop and hence do we still need to worry on it? Can we use index as key till we are not rely on key property for anything? Please advise. Thanks in advance.

I create table from static array in reactjs . table contains {id,name, and address} fields. Name is clickable now but how i can get row data when i click on name. plz make video for it

sorry discussing other topic, your video index is wrong after 17 missing 18 and after 25 it is showing 19.

I got a question. You said that if no key is passed, then default key is passed as index. In the previous lecture (no. 18), when no key is passed, then default key would be passed as index accordingly. There you mentioned that adding an item at the start of the list will result into performance issue but not any unexpected behaviour in the list rendering. In this video, you are mentioning that adding an item at the start of the list will result into unexpected behaviour. Why this contradiction?

Waiting for .. Next... episodes..

hi i am learning sir

but , what is the solution if we using index as key and list will need to be sorted ?

Oh ok, so the key prop goes in the JSX tag, only if the JSX is in the parent component. Got it :)

7:03 that is incorrect explaination for the codepen, react doc mentions the component state in the uncontrolled input is the reason. Without that state, the element will add to the top just fine with index as key, it only causes more updating to the DOM node

What if the supported array doesn't have an unique ones(id or something), and we also need to filter or order that array too?

Thanks..

did not understand why dorting doesnot sort actual values but index

Bruce Wayne, Clark Kent, Diana Prince ?

If you use controlled component with this anti pattern, then this issue will not come. It only comes when you use uncontrolled component(here input text field) with this anti-pattern.

Why weren't Index, ID, and Created at not get messed up too like Item ? I thought they were all part of ToDo?

4:54 Requesting more explanation for better understanding

3:00 second param of map function

What's the purpose of such behavior?

what if dont pass key. That time what value it will take as a key.

If I remove the input box and replace it with a span with id as text, then I cannot simulate this behavior. Guess it only happens when you have an uncontrolled component in ur siblings.

Actually i am the begginer of react and i want know how you implement the project of in this video

any answer to such issue??

Making a calculator, Just realized how important this video is😅

the odin project

👍

6:50 * this is the problem of using the index as key * ;)

As prophet Muhammad (PBUH) said those who don't thanks people don't thank God, really thank you for such a wonderful course.👍🌼

hi sir

Too musch of Ads , How much u earned from this tutorial , must more than a billion !!!

key prop for normal arrays - can be its 'index'. But it has disadvantages. so don't use use index.

Why would it be an anti-pattern? Me and mi teammates know full well how keys behaves.

So basically you can use index as a key if your list is an ENUM

A simple way of creating a unique key is to use Math.random() Instead of using one of the npm packages that generate a unique ID for the list const nameList = names.map(name => {name})

man u confused me in last video and this one also. how i will pass index to Persons u skiped that part. 😕😕😠

You confused me

for me it´s too hard to understand the indian accent