The Key to Understanding React: Why Keys Matter

In this video I talk about the importance of keys in react when rendering a list of elements. When rendering a list of elements in react you get a warning if you don't supply a key. What's the point of this key? Why is it so important?
----Hire Me As a Mentor----
If you would like to hire me as a 1 on 1 mentor you can do so by following this link!
codingwithchai...
Here is the best part.... You only pay for the session if you are completely satisfied!!
So book a session and level up your web development skills today!

[@grandmaster-yo-yo]

Was looking for videos that could help me understand what is happening with the keys. Finally got it. Beautiful demonstration, thank you!

[@AurelioPita]

I wanted a video to send to junior react developers, this is the video. Well done.

[@Pareshbpatel]

The importance of Keys in React. Beautifully explained. Thanks, Chaim {2021-11-18}

[@vaibhavrawat251]

I finally understood this concept in depth! Thanks!

[@muhammadjawadurrahim4883]

Awesome explanation !!! Want to see more of these videos. Hope your channel blowsup

[@MsLemons12]

Perfect explanation. I just got nailed by this on my first junior dev interview 😔

[@art4thesoul]

I'm guessing that your excellent way of reasoning and explaining comes from the way of studying rabbinical discourse ;) --- love it!

[@CodingWithChaim]

Could very well be! This is probably my favorite comment I have gotten yet, so thank you!

[@sthefanocarvalho2823]

Awesome! This perfectly explains why this is so important for React. Thanks for sharing :)

[@sanjarcode]

Identity. The word I was looking for. It's also used to force remount a component, BTW.

[@MaRy1988]

Your channel is a treasure! Please, make more videos🙏

[@CodingWithChaim]

Videos starting up again real soon

[@cassioscabral]

Man, your videos are great. Really appreciate it. Thanks for sharing!

[@ffedchik]

I am curious about why the hell Chaim's video playbacks are always on default 1.5 speed indstead of normal 1.0?

[@ironheadmedia1625]

Eminem teaches why keys are important in React, lol :) Thanks for the video , you really helped me to understand better.

[@damo190]

Omg. Such a beautiful explain !!!

[@masoudf46]

Excellent explanation, thank you.

[@jonahg6564]

Another amazing and quality vid! Thanks!

[@harshitchawla1991]

Amazing explanation 👍🏼 just a word of advice if you want to reach out more people in countries where English is no the primary language, speak a little slowly .

[@27455628]

Definitely one of the best rapping performance from a programmer 😀

[@zlackbiro]

You can use key={"element" + index}, and thats good, for the next group of elements in your jsx, use key={"group2" + index). You can combine key={el.name + index} If you need specific element to render on every component update, you can use key={Date.now()+index}

[@bltz5058]

Such as good explaination thank you .

[@brunokozina4361]

I feel like I am at the auction ... tnx for the explanation btw. :)

[@developerfriendly]

Hi Chaim, thanks for the video. What is your opinion on Angular? Can you also do videos about Angular?

[@CodingWithChaim]

I have never used angular, and I don't see that happening in the near future unfortunately. There are things that seem more exciting to me personally that I want to dive into

[@aashayamballi]

Very informative! Thank you 🙏🏼

[@CodingWithChaim]

You’re most welcome!

[@mosheritterman3472]

Glad you threw in a Cars (object) example ;)

[@CodingWithChaim]

I wasn’t gonna let you down

[@music_around_us7154]

so does it checks only the key and not the data if so then we it should be displaying the wrong output .The output should now be 1 to 9 as there keys are same and the last 10 should not be displayed as there are 9 items to be mapped.

[@aakashsrivastava5557]

Great great great....Thanks a lot :)

[@Teteu.freitas]

Nice Video!

[@ghostrgp01]

It makes sense now, thank you!

[@geopadu]

This is so cool!

[@HimanshuKumar-xz5tk]

Wonderful!!!!!!!!!!

[@jonahg6564]

Is that a new mic? It sounds so good

[@CodingWithChaim]

Thanks! Actually not a new mic, I just finally started taking the time to learn how to use the thing! Turns audio is a beast to learn about and there is so much more to learn

[@jonahg6564]

@@CodingWithChaim it sounds amazing. Def heard the difference! Keep it up 👏🏼

[@akashsxo]

What is the "any type" warning in typescript jsx ?

[@roprop7339]

אח יקרר מאיפה אתה?

[@min-of8cv]

Just found your channel & realized that you haven't uploaded new content for months..

[@serjio8781]

what if I don't really have anything else that's unique?? No ids or anything like that

[@CodingWithChaim]

You can use an id generation library like uuid

[@serjio8781]

@@CodingWithChaim is there a chance that's it's gonna generate something that's not unique? like if I have a huuuge array which has thousands of elements or that's absolutely excluded?

[@CodingWithChaim]

Yea thats technically possible, but super unlikely.

[@serjio8781]

@@CodingWithChaim Thanks man. Great stuff as always. I didn't even know It's not a good idea to use indexes. I just wanted to feed it something so the annoying warning would shut up xD

[@endernator]

what do you have on your head?

[@urge-bull]

why aren't you making video. Closed this channel?

[@CodingWithChaim]

Already have a few new videos in the works. Should be getting back to it in the near future

[@urge-bull]

@@CodingWithChaim Glad to know. As i have learened alot from you con tent. 🔥

[@akhil.r4747]

Your explanation is good but you are saying very fast please from next video try to explain slowly

[@MN-fl3hb]

Play at 0.75 for english.....

[@emmanuelibe1896]

You are too fast😅

[@ivancastillo3893]

Your devTools that you're telling us to look at in your video, are literally not being shown in your video lol. I didn't understand what you were talking about. Might've helped me a lot if I could actually see your devTools :)

[@rameshramesh-bd2wu]

Talk slowly