React Key vs Id

What’s the point of keys for arrays in React when id can act as the key? (That’s what I always use as the key)

I also don’t see the negative of not having a key. When an array element is removed, the DOM gets updated. When an array element with a key is removed, the DOM gets updated.

When an array element has a property change, the DOM gets updated. When an array element with a key has a property change, the DOM gets updated.

:sob:

Hi, first of all, I’m not a native English speaker, so pardon my simplicity. React, like Vue and Angular, uses “keys” to improve the performance and management of component states. When your app undergoes changes, React needs to identify what exactly has changed. If you don’t use keys, React would refresh everything, instead of just the modified components, wich is inefficient. Keys also help to maintain the state of components in a list. If the order of the list changes and you’re not using keys, React can get confussed and might not know precisely what to update.

You can certanly use ids as keys, but make sure they are unique and constant. if the id changes due to some user action or event, it can cause problems.

Additionaly, if your components are simple, you might not see the need for keys. Try working with more complex components and you’ll see the difference. Also if u omit the key, React is smart and shows you a warning, as it’s not considered good practice to ignore keys. I hope this helps!

1 Like

Reconciliation – React (reactjs.org)
The only link that actually dares to explain why keys are necessary

However, I don’t see why React doesn’t automatically assign keys, since it seems to already automatically tag elements to know when to update them (e.g. when state is updated). Ids are user-defined because of CSS, keys are basically useless apart from its primary purpose of efficiency.

Also, why do only arrays need keys? Non-array elements can also be re-ordered/deleted, for example if a condition is met, one element may not be rendered at all - it will appear not present to the DOM handler. Yes, this is inefficient and not good code, but in this case won’t keys still be needed to optimize performance?

1 Like
  • maybe an example of it would be more fitting :slight_smile:
  • if im not wrong its a “warning” that shows in console and not exactly an error per say :slight_smile:

happy learning :slight_smile:

Could you answer my two questions I’ve replied to your first message with?

not sure if this was meant for me!! thanks :slight_smile:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.