The Key to Understanding React: Why Keys Matter

Поделиться
HTML-код
  • Опубликовано: 14 фев 2021
  • 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!
    codingwithchaim.dev/
    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!
  • НаукаНаука

Комментарии • 56

  • @grandmaster-yo-yo
    @grandmaster-yo-yo 5 месяцев назад

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

  • @AurelioPita
    @AurelioPita Год назад

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

  • @vaibhavrawat251
    @vaibhavrawat251 3 года назад +3

    I finally understood this concept in depth! Thanks!

  • @Pareshbpatel
    @Pareshbpatel 2 года назад +1

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

  • @muhammadjawadurrahim4883
    @muhammadjawadurrahim4883 3 года назад

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

  • @cassioscabral
    @cassioscabral 3 года назад

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

  • @sthefanocarvalho2823
    @sthefanocarvalho2823 3 года назад +1

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

  • @jonahg6564
    @jonahg6564 3 года назад

    Another amazing and quality vid! Thanks!

  • @MsLemons12
    @MsLemons12 3 года назад +1

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

  • @sanjarcode
    @sanjarcode Год назад

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

  • @damo190
    @damo190 2 года назад

    Omg. Such a beautiful explain !!!

  • @art4thesoul
    @art4thesoul Год назад

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

    • @CodingWithChaim
      @CodingWithChaim  Год назад

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

  • @masoudf46
    @masoudf46 2 года назад

    Excellent explanation, thank you.

  • @ghostrgp01
    @ghostrgp01 3 года назад

    It makes sense now, thank you!

  • @aashayamballi
    @aashayamballi 3 года назад

    Very informative! Thank you 🙏🏼

  • @geopadu
    @geopadu Год назад

    This is so cool!

  • @bltz5058
    @bltz5058 2 года назад

    Such as good explaination thank you .

  • @MaRy1988
    @MaRy1988 2 года назад

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

  • @aakashsrivastava5557
    @aakashsrivastava5557 2 года назад

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

  • @HimanshuKumar-xz5tk
    @HimanshuKumar-xz5tk 2 года назад

    Wonderful!!!!!!!!!!

  • @teteu.do.xequemat
    @teteu.do.xequemat 2 года назад

    Nice Video!

  • @ffedchik
    @ffedchik 3 года назад +1

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

  • @developerfriendly
    @developerfriendly 3 года назад

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

    • @CodingWithChaim
      @CodingWithChaim  3 года назад +1

      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

  • @ironheadmedia1625
    @ironheadmedia1625 2 года назад

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

  • @AkashSingh-uk5ub
    @AkashSingh-uk5ub 3 года назад

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

  • @brunokozina4361
    @brunokozina4361 3 года назад

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

  • @music_around_us7154
    @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.

  • @27455628
    @27455628 2 года назад +1

    Definitely one of the best rapping performance from a programmer 😀

  • @mosheritterman3472
    @mosheritterman3472 3 года назад

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

  • @endernator
    @endernator 2 года назад

    what do you have on your head?

  • @jonahg6564
    @jonahg6564 3 года назад

    Is that a new mic? It sounds so good

    • @CodingWithChaim
      @CodingWithChaim  3 года назад +1

      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
      @jonahg6564 3 года назад

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

  • @harshitchawla1991
    @harshitchawla1991 3 года назад +5

    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 .

  • @zlackbiro
    @zlackbiro 3 года назад +1

    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}

  • @min-of8cv
    @min-of8cv 2 года назад

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

  • @akhil.r4747
    @akhil.r4747 3 года назад +1

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

  • @serjio8781
    @serjio8781 3 года назад

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

    • @CodingWithChaim
      @CodingWithChaim  3 года назад +1

      You can use an id generation library like uuid

    • @serjio8781
      @serjio8781 3 года назад +1

      @@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
      @CodingWithChaim  3 года назад +1

      Yea thats technically possible, but super unlikely.

    • @serjio8781
      @serjio8781 3 года назад

      @@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

  • @roprop7339
    @roprop7339 3 года назад +1

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

  • @urge-bull
    @urge-bull 2 года назад

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

    • @CodingWithChaim
      @CodingWithChaim  2 года назад +1

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

    • @urge-bull
      @urge-bull 2 года назад

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

  • @MN-fl3hb
    @MN-fl3hb 2 года назад

    Play at 0.75 for english.....

  • @ivancastillo3893
    @ivancastillo3893 3 года назад

    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 :)

  • @emmanuelibe1896
    @emmanuelibe1896 Год назад

    You are too fast😅

  • @rameshramesh-bd2wu
    @rameshramesh-bd2wu 3 года назад +1

    Talk slowly