Why do We Need Keys in React?

Рет қаралды 10,845

Күн бұрын

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 KZfaq channel (it is in Hindi/English mix) where I share coding tips, tricks, and hacks: cdm.sh/mehulyt

Пікірлер: 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

@sumansah7278 2 жыл бұрын

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

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

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

@sampathsam1049 Жыл бұрын

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

@kk-kw7yx 2 жыл бұрын

This format is really good. Tq!

@alibarznji2000 2 жыл бұрын

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

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

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

@mpire6712 2 жыл бұрын

This was incredible 👌👍

@fahimsium1013 2 жыл бұрын

great content,keep up bro.

@kikevanegazz325 Жыл бұрын

Excellent tutorial

@gulshanaggarwal4577 2 жыл бұрын

Seeing 👀 first time on the whiteboard, excited 🤩🤩

@ivanjasenov1220 2 жыл бұрын

Great explanation and right to the point! +1

@html8525 2 жыл бұрын

Great explanation

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

@JehadiHellTransportAgency Жыл бұрын

thankyou sir the best video for keys

@abhishekvishwakarma9045 2 жыл бұрын

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

@aadarshaacharya267 2 жыл бұрын

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

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

@divyanshsinghbhati6026 Жыл бұрын

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

@mohammedashraf8351 2 жыл бұрын

Hey mehul, a great explanation

@rafeeqshaik7355 2 жыл бұрын

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

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

@ridl27 2 жыл бұрын

okay, this tutorial is acceptable xD

@alihazem1479 2 жыл бұрын

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

@panchcw 2 жыл бұрын

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

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

@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 жыл бұрын

@siemen_subbaiah 2 жыл бұрын

Next topic : Javascript hoisting or Javascript closures!

@KnownTechnical 2 жыл бұрын

Nice

@thegreatprogrammer5937 2 жыл бұрын

Next video plz: portal vs component in React

@hsngsoftware4380 2 жыл бұрын

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

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

@DEV_XO 2 жыл бұрын

nice

@milon27 2 жыл бұрын

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

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

@Sandeep-zd6dq 2 жыл бұрын

I want codedamn t-shirt 🔥🔥 and want to jealous my friends in college 😂🥳🥳

@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