Why do We Need Keys in React?

Рет қаралды 11,581

Күн бұрын

Пікірлер: 68

@codedamn 3 жыл бұрын

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

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

@shashikantkalshetty 3 жыл бұрын

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

@ppppp524 3 жыл бұрын

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

@sumansah7278 3 жыл бұрын

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

@pawekoaczynski4505 3 жыл бұрын

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:

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

@KrishnenduKDG 3 жыл бұрын

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

@roman_mf 14 күн бұрын

Nice refresher, thanks Mehul!

@VijayKumar-pd7vv 3 жыл бұрын

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

@alibarznji2000 3 жыл бұрын

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

@sampathsam1049 2 жыл бұрын

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

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

This format is really good. Tq!

@tiffanyhall6701 3 жыл бұрын

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!

@pranupranav5563 2 жыл бұрын

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.

@gulshanaggarwal4577 3 жыл бұрын

Seeing 👀 first time on the whiteboard, excited 🤩🤩

@BeastMaster65 3 жыл бұрын

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

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.

@abhishekvishwakarma9045 3 жыл бұрын

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

@amarg26 3 жыл бұрын

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

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

Yes, this needs to be answered 👍

@mitejmadan8672 3 жыл бұрын

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

Now it's @codedamn turn to answer 🤔

@soni.himansh 3 жыл бұрын

Loved the Explanation.

@divyanshsinghbhati6026 Жыл бұрын

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

@mpire6712 3 жыл бұрын

This was incredible 👌👍

@kikevanegazz325 2 жыл бұрын

Excellent tutorial

@fahimsium1013 3 жыл бұрын

great content,keep up bro.

@Ronifromearth 2 жыл бұрын

thankyou sir the best video for keys

@arogueotaku 3 жыл бұрын

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

@ivanjasenov1220 2 жыл бұрын

Great explanation and right to the point! +1

@html8525 3 жыл бұрын

Great explanation

@milon27 3 жыл бұрын

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

@milon27 3 жыл бұрын

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

@mohammedashraf8351 3 жыл бұрын

Hey mehul, a great explanation

@panchcw 3 жыл бұрын

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

@aadarshaacharya267 3 жыл бұрын

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

@rafeeqshaik7355 3 жыл бұрын

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

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

@alihazem1479 3 жыл бұрын

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

@Sonu-tg6tg 3 жыл бұрын

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

@ridl27 3 жыл бұрын

okay, this tutorial is acceptable xD

@m4saurabh 3 жыл бұрын

why react does not generate the keys by it self like svelte.

@AbhishekKumar-dq5rj 3 жыл бұрын

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