This is why you need the key property in React

[@dog4ik]

Everyone is talking about how bad is this but nobody explains why! Thanks!

[@kelvinchin5942]

Thank you for visualising it and even giving the example on what will happened if using the index of the array by reversing the order of the components. This did helped a lot

[@pujanparikh7149]

so simply explained, not sure why we don't see such a lucid example elsewhere. thank you so much!

[@Scorpion2321-o9o]

Good example right there. Still in some cases you don't have any specific id, especially if you have some items inside items, I still remember in my 2 months intern that I was supposed to write 3 purchase offers (3 Kind of services) width 20 features they provide. I just used the index as key after my boss was wondering what these generated ids are. If you google these stuffs some people just not see it as optimal way to generate these keys, but you also can't just use the index 🥴. I hated the css part in my internship, just wasted so much time with css. But I still learn more about React and TS. Glad that I was able to write code, some people in my class had done nothing in their intern, nothing worse than doing nonsense and waste potential. A teacher just asked me if I'm interested to work in his Startup, great experience.

[@pesterenan]

That was a great way of showing whi this is important! Thanks for the video!

[@beakerbkr]

I still catch this during peer reviews. Thanks for talking about this! Off topic question, do you plan on a video series on react-router 6.4? The implications for useRouteLoaderData has me beyond excited

[@WebDevCody]

I don’t really use react router since I’ve been using next

[@reezuleanu1676]

I had a grid where you could add/edit/remove elements. I added keys to them because of a warning i saw in the console. A few days later, i was debugging my code for hours (if you deleted any element except the first one within the column in the grid, it would still display, despite re rendering), only to go absolutely insane and start deleting stuff. My code worked perfectly as it was as soon as i removed all keys. These keys can go to hell

[@planetmall2]

Seriously great content. Keep doing what you’re doing! Great job!

[@rathodsandeep32]

When it come to quality content this guy never dis

[@john_dren]

I conceptually understand why the key prop is important. I can't replicate it in my own app properly though. In a more complex application where let's say we are mapping through an array of objects. Where do we put the key prop when there are multiple properties to use within the mapping? i.e. Product Card with product.title, product.description, etc

[@L-Wassa]

You can also let React assigning the keys by using: React.Children.toArray(numbers.map(() => )

[@voidedname]

^^ the reason I prepended the numbers in my demo was due to render order and state association. As I stated in my video, since it matches them by render order, we want to add the items out of order. If we add them in order the new item will be at the end, but that's also a new spot in the render sequence => it gets a new state, everything before will be matched to the same state and we won't see this bug, even though it is happening. Glad my demo was helpful to you.

[@WebDevCody]

Yeah it helped me understand that it was the state of sub components that wouldn’t be mapped up correctly. It was hard for me to understand that… I wonder if the react docs even explain this bug or just say “always use key”

[@voidedname]

@@WebDevCody "This can negatively impact performance and may cause issues with component state." That's just about the extent of what it states, it links to further resources, though.

[@WebDevCody]

@@voidedname I guess it’s an implementation detail no one needs to really know about. But a good example of the error would have been nice in the docs directly

[@voidedname]

@@WebDevCody well, it allows them to change or modify the reconciliation algorithm, so the behaviour of broken keys might change over time. But it should deserve a bigger warning. It's a realy easy mistake to make and hard to debug is you don't know about it, though you should be using a linter that checks that and react does spam error messages in the console at you. But not demonstrating the exact errors also prevents people trying to abuse it. Though you can abuse a key to reset the state from a parent.

[@marjanlukavyi4381]

what is the plugin for displaying errors near the code?

[@WebDevCody]

Error lens

[@dioncodestu]

Cool example for showing the reason behind using the key property. Love the content!

[@mohamedyamani8502]

Great example!

[@tiktokspicyfyp9195]

thank you, thank you you earned a subscriber

[@coldym]

Off topic question, do you plan on a video series on react testing library?

[@WebDevCody]

Eh idk maybe at some point

[@willyhorizont8672]

What is that in the cursor? Is that chrome extension or software? Whats that name?

[@woops30]

Hi! Since you mentioned eslint, I wanted to ask: on your proyects, do you use eslint for enforcing rules AND formatting, or do you use prettier for formatting and eslint only for the rules? I looked this up, but it seems like every single article has a different way to set it up, or a different opinion. Have you made a video about this before?

[@WebDevCody]

recently I've been using prettier to do formatting and eslint to find lint errors

[@o.h.n.o.]

I had a doubt. If I assume that I have 2 li elements from my array and now I add one more say by a button click, and the addition happens at the end of the array, will react understand that a new addition was made and not re render the entire list?

[@WebDevCody]

It should work fine because by default leaving off the key makes react use the index of the array as the key, so as long as you don’t swap elements around (sorting) you should be ok I think

[@o.h.n.o.]

@@WebDevCody I had this piece of code: import "./styles.css"; import React from 'react' export default function App() { const [ar,uar] = React.useState([1]); const up = ()=>{ uar([...ar,ar.length+1]); //uar([ar.length+1,...ar]); console.log(ar) } return ( {ar.map((x)=> Value: {`${x}`} up()}>Click )} ); } when I add a new number (the uncommented part) it works fine. I also understand that react does not completely rerender the list because if I change any value in input and then click on the button, that value stays. But if I have the second part, the commented line i.e. add a number to the array before, I find that the added element only has value as 1 (I understand the entire list rerenders but why do I not see the defaultValue get updated?) Does react skip stuff like this while comparing. If instead of defaultValue I use a placeholder, the value changes?

[@truongphatvole1614]

What name color theme vscode

[@kinstar]

ahh of course only now does this make sense properly now that ive seen it

[@DevChannel-b4i]

Great, thanks

[@theofanisbirmpilis7364]

Are u considering creating any udemy courses on React? Do you have any course recommendations for someone who knows the basics of React but wants to get to the next level?

[@WebDevCody]

Probably not

[@nareshe2430]

what is the extension name you are using for error finder?

[@xamone3172]

lmao he liked ur comment but didnt answer xD

[@shaye170]

I have no clue what your talking about and I’m gonna go into computer science degree. Should I worry?

[@WebDevCody]

are they teaching react in your degree? if not, then no don't worry.

[@yosrayari9555]

thank youu

[@parrapaTh3Rappa]

You mentioned not using index, but never mentioned why. Is there a reason why we shouldn't use that?

[@voidedname]

State mismatch on reorder, the menu staying open would be a symptom. This would also happen if you just change the order, like rotate the elements around

[@parrapaTh3Rappa]

@@voidedname ah yes, that makes total sense! Thank you!

[@WebDevCody]

not providing a key is the same as using index. so the bug I demo'd here would be the same if you used index I think.

[@parrapaTh3Rappa]

@@WebDevCody yeah, it makes sense once I think about it for more than a second and realize every time you add something, the index changes for the elements within the map. 😂🤦‍♂️

[@desirechiduku964]

Love this one ☝️

[@lucaslannes4004]

Thx

[@SeibertSwirl]

Good job babe

[@Ebiko]

And then react is complaining about not having keys for fragments... And I ask myself why, when it removes fragments anyway.

[@WebDevCody]

hmm yeah I'm not sure about that one