Why do We Need Keys in React?

Подписаться 420 тыс.

Просмотров 11 тыс.

50% 1

In this video, I talk about the importance of keys in React and how virtual DOM enables React to only update the elements that have been changed.
⚛️ Learn Full Stack Development with React JS: cdm.sh/fullstack
Timestamps
0:00 Video Starts
0:31 Difference between DOM and Virtual DOM in React
1:27 Graph Representation of DOM
2:16 Graph Representation of Virtual DOM
2:42 Graph Representation of Map method
3:37 Working of Virtual DOM using keys
6:11 Common mistake while working with keys
7:33 Outro
👉 Free HTML5 + CSS3 Course: cdm.sh/htmlcsscourse
👉 Free JavaScript Course: cdm.sh/jsbasicscourse
👉 Free ReactJS Course: cdm.sh/react
👉 Free NextS Course: cdm.sh/nextjsbasicscourse
💰 Refer codedamn to friends and earn $$: cdm.sh/refer
👉 Checkout codedamn on social:
Instagram: cdm.sh/ig
Twitter: cdm.sh/twt
Facebook: cdm.sh/fb
GitHub: cdm.sh/github
If you found the video valuable, please leave a like and subscribe ❤️ It helps the channel grow and helps me pumping out more such content.
👋 About Me:
Hey! I'm Mehul Mohan, a CSE'21 graduate from BITS Pilani, Goa. I started coding early in life, at the age of 13 when I created my first blog on Blogger. I am listed in Google, Microsoft, Sony, eSet, etc. Hall of Fame for reporting vulnerabilities in their systems.
🍎 I am Apple's WWDC'19 Scholar - visited San Francisco and attended WWDC.
📙 I am an author of 2 books, on JavaScript and React - cdm.sh/mehulbooks
🚀 Currently working on my own startup - codedamn.
Connect with me:
📸 Instagram: cdm.sh/mehulig
📱 Twitter: cdm.sh/mehultwitter
📝 LinkedIn: cdm.sh/mehullinkedin
📂 GitHub: cdm.sh/mehulgithub
🌎 Personal website: cdm.sh/mehulblog
💻 Start learning to code for free: cdm.sh/codedamn
🧑‍🤝‍🧑 Discord community: cdm.sh/discord
👉 HTML5 + CSS3 Tutorials: cdm.sh/htmlcssytplaylist
👉 Complete JavaScript Tutorial: cdm.sh/jstutorial
👉 Complete React Crash Course: cdm.sh/reacttutorial
👉 Next JS Tutorials: cdm.sh/nextjsytplaylist
🏷 Video Tags:
Why do We Need Keys in React
React.js course
React 18 full course
Learn react.js free
React free tutorials
React course
React beginner tutorial
React.js full course
👉 Check out my other personal RU-vid channel (it is in Hindi/English mix) where I share coding tips, tricks, and hacks: cdm.sh/mehulyt

Опубликовано:

1 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 67

@codedamn 2 года назад

The example in video oversimplifies a few things. Think of key prop as linked to resetting the state of the component than a definitive flag for rendering. New rendering will always happen (until you memoize the component), however if your key remains same the internal component state will also remain same. Learn ReactJS along with several other Full Stack Development technologies on codedamn: cdm.sh/fullstack

@AdityaSharan811 2 года назад

The new method of teaching is amazing. It would be better if you do more videos like this.👍

@shashikantkalshetty 2 года назад

Same kind of videos needed for topics like batching and async nature of setState()

@ppppp524 2 года назад

This was incredibly useful. I wish I saw this before my interview last week lol

@VijayKumar-pd7vv 2 года назад

Good to see you regularly striving to keep up the good content

@sampathsam1049 Год назад

Your the person , this what I need if i doesn't add keys what will happen . Your explained so good . Thanks bro

@sumansah7278 2 года назад

I have been learning react for front end developer but I did not encounter this much informative and concepts Thank you bhaiya.

@kk-kw7yx 2 года назад

This format is really good. Tq!

@KrishnenduKDG 2 года назад

This was really a cool and informative video.. Had worked with React previously and also had faced same errors and even felt disgusted when React threw that error... But after watching this one today, I am now convinced that React needs it for our good only and that is Optimisation of Rendering Process. Thank You so much for this video.. Would love to see this type of Out-of-Box content yet very important ones in future as well.... 😊😊😊

@soni.himansh 2 года назад

Loved the Explanation.

@pawekoaczynski4505 2 года назад

I watch a lot of your videos and rarely comment, so I just wanted to take a moment to thank you for the job you're doing c:

@kikevanegazz325 Год назад

Excellent tutorial

@tiffanyhall6701 2 года назад

I loved this format. I enjoyed seeing your thinking as you wrote it on the board. Then the addition of the visuals you had were great at providing clarity and really making a point about what is important. I think your explanations were great for a student like me to follow. The only critique is the lighting. The reflection in your glasses and on the board is distracting. New fan here for sure!

@alibarznji2000 2 года назад

We love you man, You're a very good teacher

@html8525 2 года назад

Great explanation

@JehadiHellTransportAgency Год назад

thankyou sir the best video for keys

@gulshanaggarwal4577 2 года назад

Seeing 👀 first time on the whiteboard, excited 🤩🤩

@mpire6712 2 года назад

This was incredible 👌👍

@fahimsium1013 2 года назад

great content,keep up bro.

@ivanjasenov1220 2 года назад

Great explanation and right to the point! +1

@abhishekvishwakarma9045 2 года назад

Great Combo -> Theory concepts (White Board) + code explanation (In vscode) 🔥

@BeastMaster65 2 года назад

Damn this was really informative, absolutely love it. Can you make another video on how to use useMemo and other rarely used hooks for optimization

@arjobansingh1940 2 года назад

Basically useMemo, is used to preserve the result of some complex function. As in functional components, we have some complex function, and on every re-render it recomputes itself, based on complexity of that function, it could really slow the component. As on every re-render that function is getting invoked and recomputing. So to get rid of this, useMemo is used, which memories the return value of some function, if the values used inside that function are same. For eg, in most of complex functions, values don't change often, but as it is present inside some component which ofcourse re-renders on every state and prop change, the function is basically called again and again, although values used inside that function have not changed. So in that case, useMemo is used, so that every time the component re-renders, useMemo will check if values it's function is dependant upon is changed? If yes, than only recompute the function, otherwise return the previous return value. As it will be same because, values that function is dependent upon has not changed. So basically this is the idea of useMemo, to learn about it's exact api, you can refer it's docs and other materials.

@pranupranav5563 Год назад

for using unique key we can use useId() hook like: let uniqueId=useId() and use the uiqueId in the place of key of that element.

@rafeeqshaik7355 2 года назад

In-depth video of useref please. SPAM that like button BOIS

@mohammedashraf8351 2 года назад

Hey mehul, a great explanation

@aadarshaacharya267 2 года назад

Awesome video Mehul. Keep making whiteboard videos more. I find it more understandable than showing graphics presentation slides.

@Sonu-tg6tg 2 года назад

Thanks for such awesome videos, always waiting for your new videos, will be glad to get t-shirt giveaway

@Avoid0 2 года назад

Wow🔥

@divyanshsinghbhati6026 Год назад

0:46 In React, the Virtual DOM (Virtual Document Object Model) is maintained by the React library itself

@cedric5027 Год назад

Nice explanation. However, if the list is in a useState on the parent and one item is being updated, won't the whole tree be rerendered as the parents state has changed?

@panchcw 2 года назад

we need these oversimplified whiteboard videos. for beginners, this will be a solid basic foundation.

@milon27 2 года назад

how to work with jwt token in react + express api? how to store them so that we can prevent xss abd csrf attack.

@KnownTechnical 2 года назад

Nice

@siemen_subbaiah 2 года назад

Next topic : Javascript hoisting or Javascript closures!

@milon27 2 года назад

is it possible refresh jwt token in react? how to do that?

@alihazem1479 2 года назад

Could you please upload a video in this way explaining useref pls? Would really appreciate you doing one!

@ridl27 2 года назад

okay, this tutorial is acceptable xD

@arogueotaku 2 года назад

So based on the key, react will either update or not update the actual DOM. What if the data inside the array changes but the key does not change (if Using index as a key)? For example: [1,2,3] changes to [4,5,3] where the list is rendered using indexes as the keys. Will react not update the DOM in this case? Because keys are still the same (0,1,2)?

@codedamn 2 года назад

@DEV_XO 2 года назад

nice

@thegreatprogrammer5937 2 года назад

Next video plz: portal vs component in React

@amarg26 2 года назад

@codedamn When an individual can decide when to switch from react.js to next.js. I have surface-level knowledge of function, class, hooks components. Can I switch to next.js or do I need to be an expert in react.js then move to next.js?

@aissaouboukioud585 2 года назад

You can move to nextjs because it is build on top of reactjs and you can use everything you learn with reactjs the same way in nextjs. Nextjs comes with very great features out of the box like file-based router, server side rendering, creating endpoint API, ... So with Nextjs you can do fullstuck development

@abhishekvishwakarma9045 2 года назад

Yes, this needs to be answered 👍

@mitejmadan8672 2 года назад

I have created a complex project using nextjs. It is actually quite easy to learn next js if know react. Things which are different in next.js 1.) File architecture 2.) How css is applied. 3.) APIs 4.) Server side rendering. (If you want in your app). You can do the next js course from codedamn.. Some ytbers who you can follow 1.) Leigh Halliday 2.) Colby fayock 3.) Lee Robinson If you get stuck with an error check stackoverflow or the issue section from github nextjs.

@amarg26 2 года назад

Now it's @codedamn turn to answer 🤔

@neeleshpoojari5207 2 года назад

I HAVE ARRAY OF 3 ITEMS [1,2,3] AND I CHANGED IT TO [4,5,6] .. IN THIS SCENARIO INDEX IS GIVEN AS KEY.. HOW REACT WILL KNOW THAT VALUE HAS CHANGED IF COMPARISION IS BASED ON KEY?

@hsngsoftware4380 2 года назад

After learning from your course, I can start my own course, I AM GPT 10

@AbhishekKumar-dq5rj 2 года назад

But when using the index as key, if we delete an item from the start, then the key of trade of items still stays same, just the last key is deleted, so react should delete the last item, instead of re-rendering all the items from the beginning to the end